Events & Event Listeners

1
const button = document.querySelector("button");
2

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

1
button.addEventListener("click", (event) => {
2
  console.log(event.type);       // "click"
3
  console.log(event.target);     // the element that was clicked
4
  console.log(event.currentTarget); // the element the listener is attached to
5
  console.log(event.clientX);    // mouse X position relative to viewport
6
  console.log(event.clientY);    // mouse Y position relative to viewport
7
});

1
element.addEventListener("click", handler);     // single click
2
element.addEventListener("dblclick", handler);  // double click
3
element.addEventListener("mousedown", handler); // mouse button pressed
4
element.addEventListener("mouseup", handler);   // mouse button released
5
element.addEventListener("mousemove", handler); // mouse moved
6
element.addEventListener("mouseenter", handler);// mouse enters element
7
element.addEventListener("mouseleave", handler);// mouse leaves element
8
element.addEventListener("contextmenu", handler);// right-click

1
document.addEventListener("keydown", (event) => {
2
  console.log(`Key pressed: ${event.key}`);   // "a", "Enter", "ArrowUp"
3
  console.log(`Key code: ${event.code}`);     // "KeyA", "Enter", "ArrowUp"
4

5
  if (event.key === "Enter") {
6
    console.log("Enter was pressed");
7
  }
8

9
  // Check modifier keys
10
  if (event.ctrlKey && event.key === "s") {
11
    event.preventDefault(); // prevent browser save dialog
12
    console.log("Ctrl+S was pressed");
13
  }
14
});
15

16
document.addEventListener("keyup", handler); // key released

1
const form = document.querySelector("form");
2
const input = document.querySelector("input");
3

4
form.addEventListener("submit", (event) => {
5
  event.preventDefault(); // stop page reload
6
  console.log("Form submitted!");
7
});
8

9
input.addEventListener("input", (event) => {
10
  console.log(event.target.value); // current input value on every change
11
});
12

13
input.addEventListener("change", (event) => {
14
  console.log("Value changed and focus lost:", event.target.value);
15
});
16

17
input.addEventListener("focus", () => console.log("Input focused"));
18
input.addEventListener("blur", () => console.log("Input lost focus"));

1
document.addEventListener("DOMContentLoaded", () => {
2
  // DOM is ready — safe to query elements
3
  console.log("DOM fully loaded");
4
});
5

6
window.addEventListener("load", () => {
7
  // Everything loaded including images, styles, scripts
8
  console.log("Page fully loaded");
9
});
10

11
window.addEventListener("scroll", () => {
12
  console.log("Scrolled:", window.scrollY);
13
});
14

15
window.addEventListener("resize", () => {
16
  console.log("Window resized:", window.innerWidth, "x", window.innerHeight);
17
});

1
function handleClick(event) {
2
  console.log("Clicked!");
3
}
4

5
// Add
6
button.addEventListener("click", handleClick);
7

8
// Remove — must be the same function reference
9
button.removeEventListener("click", handleClick);

1
// ❌ Cannot remove — different function references
2
button.addEventListener("click", () => console.log("Click"));
3
button.removeEventListener("click", () => console.log("Click")); // no effect

1
button.addEventListener("click", () => {
2
  console.log("This runs only on the first click");
3
}, { once: true });

1
element.addEventListener("click", handler, {
2
  capture: false,    // use capture phase (default: false)
3
  once: false,       // auto-remove after first invocation
4
  passive: false,    // if true, indicates handler won't call preventDefault()
5
  signal: controller.signal, // AbortSignal to remove listener
6
});

1
// Tell browser this listener won't prevent scroll
2
window.addEventListener("touchstart", handler, { passive: true });

1
<ul id="list">
2
  <li>Item 1</li>
3
  <li>Item 2</li>
4
  <li>Item 3</li>
5
</ul>

1
// ❌ Inefficient — one listener per item
2
document.querySelectorAll("li").forEach((li) => {
3
  li.addEventListener("click", () => console.log(li.textContent));
4
});
5

6
// ✅ Efficient — single listener on parent
7
document.getElementById("list").addEventListener("click", (event) => {
8
  if (event.target.tagName === "LI") {
9
    console.log(event.target.textContent);
10
  }
11
});

1
button.addEventListener("click", function() {
2
  console.log(this); // the button element
3
  console.log(this.textContent);
4
});
5

6
// Arrow functions don't have their own `this`
7
button.addEventListener("click", () => {
8
  console.log(this); // NOT the button — surrounding lexical scope
9
});

1
link.addEventListener("click", (event) => {
2
  event.preventDefault(); // don't navigate
3
  console.log("Link clicked but navigation prevented");
4
});
5

6
form.addEventListener("submit", (event) => {
7
  event.preventDefault(); // don't reload page
8
  // handle form with JavaScript instead
9
});
10

11
document.addEventListener("contextmenu", (event) => {
12
  event.preventDefault(); // disable right-click menu
13
});

1
// Trigger a click
2
button.click();
3

4
// Or use the Event constructor
5
const event = new Event("click");
6
button.dispatchEvent(event);
7

8
// With custom data
9
const custom = new CustomEvent("userLogin", {
10
  detail: { userId: 123, name: "Alice" },
11
});
12
document.dispatchEvent(custom);
13

14
// Listen for it
15
document.addEventListener("userLogin", (event) => {
16
  console.log(event.detail); // { userId: 123, name: "Alice" }
17
});

1
// Add event listener
2
element.addEventListener("event", handler, options);
3

4
// Remove event listener
5
element.removeEventListener("event", handler);
6

7
// Common events
8
"click", "submit", "keydown", "keyup", "input", "change"
9
"scroll", "resize", "load", "DOMContentLoaded", "focus", "blur"
10
"mouseenter", "mouseleave", "mousemove"
11

12
// Useful event properties
13
event.target, event.currentTarget, event.type
14
event.key, event.code, event.clientX, event.clientY
15
event.preventDefault(), event.stopPropagation()