Events

Introduction

Events represent actions or occurrences in the browser such as clicks, typing, scrolling, or loading.

JavaScript listens to these events and executes code, enabling interactive applications.

---

Event Lifecycle

graph TD A[User Action] --> B[Event Created] B --> C[Capture Phase] C --> D[Target Phase] D --> E[Bubble Phase]

Phases Explained

• Capture Phase → event travels from root → target
• Target Phase → event reaches target element
• Bubble Phase → event moves back to root

---

addEventListener

const btn = document.querySelector("#btn");

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

btn.addEventListener("click", handleClick);

---

Options

btn.addEventListener("click", handleClick, {
  once: true,
  capture: false,
  passive: true
});

• once → runs only once
• capture → runs in capture phase
• passive → improves scroll performance

---

Removing Event Listeners

btn.removeEventListener("click", handleClick);

---

Event Object

input.addEventListener("input", (event) => {
  console.log(event.target.value);
  console.log(event.type);
});

---

Key Properties

target

Actual element where event occurred

currentTarget

Element where listener is attached

type

Type of event (click, input, etc.)

---

target vs currentTarget

parent.addEventListener("click", (e) => {
  console.log(e.target);         // actual clicked element
  console.log(e.currentTarget);  // parent
});

---

Common Event Types

Mouse

click, dblclick, mousemove

Keyboard

keydown, keyup

Form

submit, input, change

Window

load, resize, scroll

---

preventDefault & stopPropagation

form.addEventListener("submit", (e) => {
  e.preventDefault();
});

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

---

Event Propagation Flow

graph TD A[Window] --> B[Document] B --> C[Parent] C --> D[Target] D --> E[Bubble Up]

---

Event Delegation

list.addEventListener("click", (e) => {
  if (e.target.matches("li")) {
    console.log(e.target.textContent);
  }
});

---

Why Delegation?

• Fewer listeners → better performance
• Works with dynamically added elements

---

graph LR A[Parent Listener] --> B[Child Events]

---

Timers

setTimeout

setTimeout(() => {
  console.log("Runs once");
}, 2000);

setInterval

const id = setInterval(() => {
  console.log("Repeating");
}, 1000);

clearInterval(id);

---

Event Loop Connection

graph TD A[Call Stack] --> B{Empty?} B -->|No| C[Wait] B -->|Yes| D[Take Event Callback] D --> E[Execute]

---

Real-World Pattern: Form Handling

form.addEventListener("submit", (e) => {
  e.preventDefault();

  const data = new FormData(form);
  console.log(data.get("email"));
});

---

Real-World Pattern: Disable Button

btn.addEventListener("click", async () => {
  btn.disabled = true;

  await new Promise(r => setTimeout(r, 1000));

  btn.disabled = false;
});

---

Memory & Cleanup

element.removeEventListener("click", handler);
clearInterval(timerId);

---

Best Practices

1. Use addEventListener, not inline handlers
2. Prefer event delegation for lists
3. Keep handlers small
4. Clean up listeners when not needed
5. Avoid unnecessary DOM queries inside handlers