JavaScript Events

In JavaScript, an “event” is an action or occurrence that happens in the browser, like a user clicking a button, submitting a form, loading a page, or resizing the window. JavaScript allows you to respond to these events by executing code when they happen.

Here are some common types of events in JavaScript and examples of how to use them:

1. Mouse Events

• click: Fires when an element is clicked.
• dblclick: Fires when an element is double-clicked.
• mouseenter / mouseleave: Fires when the mouse enters or leaves an element.
• mousemove: Fires as the mouse moves over an element.

Example of a click event:

const button = document.getElementById("myButton");

button.addEventListener("click", function() {
  console.log("Button was clicked!");
});

2. Keyboard Events

• keydown: Fires when a key is pressed.
• keyup: Fires when a key is released.
• keypress: Fires when a key is pressed down and held (deprecated, but you may see it in older code).

Example of a keydown event:

document.addEventListener("keydown", function(event) {
  console.log(`Key pressed: ${event.key}`);
});

3. Form Events

• submit: Fires when a form is submitted.
• input: Fires when the value of an input element changes.
• change: Fires when the value of a select, checkbox, or radio input changes.
• focus / blur: Fires when an element gains or loses focus.

Example of a submit event:

const form = document.getElementById("myForm");

form.addEventListener("submit", function(event) {
  event.preventDefault();  // Prevents form from actually submitting
  console.log("Form was submitted!");
});

4. Window Events

• load: Fires when the entire page has loaded, including images and stylesheets.
• resize: Fires when the browser window is resized.
• scroll: Fires when the user scrolls the page.
• unload: Fires when the user leaves the page (e.g., closing the tab).

Example of a load event:

window.addEventListener("load", function() {
  console.log("Page is fully loaded!");
});

5. Focus Events

• focus: Fires when an element gains focus.
• blur: Fires when an element loses focus.

Example of a focus event:

const inputField = document.getElementById("nameInput");

inputField.addEventListener("focus", function() {
  console.log("Input field is focused!");
});

6. Other Common Events

• change: Fires when the value of an input element changes.
• contextmenu: Fires when the right mouse button is clicked (usually opening a context menu).
• copy / paste / cut: Fires when the user copies, pastes, or cuts content.

Example of a change event:

const selectBox = document.getElementById("colorSelect");

selectBox.addEventListener("change", function() {
  console.log(`Selected color: ${selectBox.value}`);
});

Attaching Events Directly in HTML

You can also attach events directly in HTML using attributes, though this is less common in modern JavaScript:

<button onclick="alert('Button clicked!')">Click me</button>

Removing Event Listeners

You can remove an event listener with removeEventListener if you previously added it with addEventListener:

function handleClick() {
  console.log("Button clicked!");
}

button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

Summary

JavaScript events allow you to make your web pages interactive by responding to user actions and browser changes. Each type of event serves a different purpose and is suited for specific tasks in your code.