Adding Event Listeners

The addEventListener() method attaches an event handler to an element.

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

This method provides several advantages:

• Multiple event listeners can be attached to a single element.

• It allows removing event listeners later.

• It provides better separation of JavaScript from HTML.

Common Event Types

Events can be triggered by user actions or system interactions.

Mouse Events

• click – Triggered when an element is clicked.

• dblclick – Triggered on a double-click.

• mouseover – Triggered when the mouse enters an element.

• mouseout – Triggered when the mouse leaves an element.

• mousedown / mouseup – Triggered when a mouse button is pressed or released.

Example:

document.getElementById("box").addEventListener("mouseover", () => {
  console.log("Mouse entered the box!");
});

Keyboard Events

• keydown – Triggered when a key is pressed down.

• keyup – Triggered when a key is released.

• keypress – (Deprecated) Used for detecting character key presses.

Example:

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

Form Events

• submit – Triggered when a form is submitted.

• change – Triggered when the value of an input field changes.

• focus / blur – Triggered when an input field gains or loses focus.

Example:

document.getElementById("myForm").addEventListener("submit", event => {
  event.preventDefault(); // Prevents form submission
  console.log("Form submitted!");
});

Window Events

• load – Triggered when the page finishes loading.

• resize – Triggered when the window is resized.

• scroll – Triggered when the page is scrolled.

Example:

window.addEventListener("resize", () => {
  console.log("Window resized!");
});

Event Object (event)

When an event occurs, an event object is automatically passed to the event handler, containing useful information about the event.

Example:

document.addEventListener("click", event => {
  console.log("Event Type:", event.type);
  console.log("Target Element:", event.target);
  console.log("Mouse Coordinates:", event.clientX, event.clientY);
});

Event Propagation (Bubbling and Capturing)

JavaScript events propagate through the DOM in two phases:

1. Capturing Phase – The event moves from the root element down to the target.

2. Bubbling Phase – The event moves from the target back up to the root.

By default, events bubble up.

Example of event bubbling:

document.getElementById("parent").addEventListener("click", () => {
  console.log("Parent clicked!");
});
  
document.getElementById("child").addEventListener("click", () => {
  console.log("Child clicked!");
});

Clicking the child element will log:

To stop event propagation:

document.getElementById("child").addEventListener("click", event => {
  event.stopPropagation();
  console.log("Child clicked, but event won't bubble up.");
});

To use the capturing phase, pass true as the third argument in addEventListener():

document.getElementById("parent").addEventListener("click", () => {
  console.log("Parent clicked during capture phase.");
}, true);

Removing Event Listeners

Use removeEventListener() to detach an event handler.

function showMessage() {
  console.log("Button clicked!");
}
  
let button = document.getElementById("myButton");
button.addEventListener("click", showMessage);
  
// Remove the event listener
button.removeEventListener("click", showMessage);

Important: The function reference must match exactly for removeEventListener() to work.

Event Delegation

Instead of adding event listeners to multiple elements, event delegation attaches a single listener to a parent element and checks which child triggered the event.

document.getElementById("list").addEventListener("click", event => {
  if (event.target.tagName === "LI") {
    console.log("List item clicked:", event.target.textContent);
  }
});

Benefits of event delegation:

• Improves performance by reducing the number of event listeners.

• Useful for dynamically added elements.

Preventing Default Behavior

Some events have default browser behavior (e.g., form submissions, link clicks). The event.preventDefault() method prevents this.

document.getElementById("myLink").addEventListener("click", event => {
  event.preventDefault();
  console.log("Link click prevented!");
});

Conclusion

Event handling is essential for interactive web applications. This section covered event listeners, event propagation, event delegation, and preventing default behaviors. The next section will focus on working with forms and user input in JavaScript.