JavaScript DOM Events

Introduction

DOM events let your JavaScript react to user actions: clicks, key presses, mouse movement, scrolling, input changes, form submission, loading, and much more. Events are the core of interactive web pages.

1. Adding an Event Listener

document.getElementById("btn").addEventListener("click", () => {
  alert("Clicked!");
});

2. Common Event Types

3. Handling Click Events

document.querySelector("#box").addEventListener("click", () => {
  console.log("Box clicked");
});

4. Getting Event Object

document.addEventListener("click", (event) => {
  console.log(event.clientX, event.clientY);
});

5. Keyboard Events

document.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    console.log("Enter pressed");
  }
});

6. Input & Change Events

document.getElementById("name").addEventListener("input", (e) => {
  console.log("Typing:", e.target.value);
});

7. Submit Event (Forms)

document.getElementById("form").addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("Form submitted");
});

8. Mousemove Events

document.addEventListener("mousemove", (e) => {
  console.log(`X: ${e.clientX}, Y: ${e.clientY}`);
});

9. Scroll Event

window.addEventListener("scroll", () => {
  console.log("Scrolling:", window.scrollY);
});

10. Event Bubbling

Events bubble up from the child → parent → document.

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

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

11. Stopping Event Propagation

element.addEventListener("click", (e) => {
  e.stopPropagation();
});

12. Event Delegation (Very Important)

Attach events to a parent instead of each child.

document.getElementById("list").addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    console.log("Clicked:", e.target.innerText);
  }
});

13. Removing Event Listeners

function handler() {
  console.log("Clicked");
}

btn.addEventListener("click", handler);
btn.removeEventListener("click", handler);

14. Once-Only Events

button.addEventListener("click", () => {
  console.log("One time");
}, { once: true });

15. Summary