Event Handling

Event handling is a crucial part of creating interactive web pages. By responding to user actions like mouse clicks, keypresses, or form submissions, JavaScript allows your webpage to come alive in dynamic and meaningful ways. At the core of event handling are concepts like event listeners, event delegation, and understanding how events propagate through the DOM.

.addEventListener()

The preferred way to handle events in JavaScript is by attaching event listeners using the .addEventListener() method. This approach allows you to separate JavaScript code from HTML, enables multiple event listeners on the same element, and provides better flexibility in terms of removing listeners later.

const button = document.getElementById("myButton");
button.addEventListener("click", function () {
  console.log("Button clicked!");
});

Syntax

1. Event Type - The first parameter specifies the type of event, such as "click", "input", or "keydown".
2. Callback Function - The second parameter is the function that gets executed when the event occurs.
3. Options (Optional) - You can pass additional options like capture or once to control the behavior of the event listener.

You can use .addEventListener() to attach multiple listeners to the same element for different event types:

const inputField = document.querySelector("#username");
inputField.addEventListener("focus", () => console.log("Input focused"));
inputField.addEventListener("blur", () => console.log("Input blurred"));

Mouse, Keyboard, and Form Events

Events in JavaScript are categorized based on their purpose, lets take a look at them in detail!

Mouse Events

Mouse events are triggered by user actions like clicking, hovering, or scrolling.

Common mouse events

1. click - Triggered when an element is clicked.
2. mouseover - Triggered when the mouse pointer enters an element.
3. mouseout -Triggered when the pointer leaves an element.

const inputField = document.querySelector("#username");
inputField.addEventListener("focus", () => console.log("Input focused"));
inputField.addEventListener("blur", () => console.log("Input blurred"));

Keyboard Events

Keyboard events are triggered when users press keys. Common keyboard events include:

1. keydown - Triggered when a key is pressed.
2. keyup - Triggered when a key is released.

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

Form Events

Form elements like text inputs, checkboxes, and submit buttons emit events when users interact with them.

Common form events include:

1. submit - Triggered when a form is submitted (useful for validating data).
2. change - Triggered when the value of a form element changes.
3. input - Triggered while typing in an input field.
4. focus - Triggered when element receives focus
5. blur - Triggered when element loses focus
6. reset - Triggered when form is reset
7. select - Triggered when text is selected inside an input/textarea
8. invalid - Triggered when an input fails validation

const form = document.querySelector("form");
form.addEventListener("submit", (event) => {
  event.preventDefault(); // Prevent page refresh
  console.log("Form submitted!");
});

---

Event Delegation and Bubbling

Event delegation helps in improving performance when working with large numbers of elements. It makes it easy to manage especially when dynamically adding or removing child elements there by helping us write cleaner, more maintainable code.

In complex web apps, adding event listeners to every element can be inefficient. This is where event delegation comes into play.

By taking advantage of event bubbling, you can attach a listener to a parent element and handle events for its child elements.

How Event Bubbling Works

When an event is triggered on an element, it “bubbles up” through its ancestors in the DOM tree. For example, clicking a button inside a <div> triggers events on the <button>, then on the <div>, and so on, until it reaches the root.

Here’s an example event delegation, by attaching a click listener to a parent element to handle clicks on its child items

const list = document.querySelector("#itemList");
list.addEventListener("click", (event) => {
  if (event.target.tagName === "LI") {
    console.log(`Item clicked: ${event.target.textContent}`);
  }
});

In this scenario, instead of attaching separate listeners to each <li> element inside the list, we attach a single listener to the parent <ul> (#itemList). Inside the listener, we check the event.target to determine which child element triggered the event.