Advance JavaScript (DOM, BOM, Web API) / Document Object Model

Event Handling - Basic

✅ What Is an Event?

An event is an action that happens in the browser:

  • A user clicks a button

  • A key is pressed

  • A page loads

  • The user scrolls

👉 JavaScript can detect these actions and respond to them.

✅ Event Flow (Event Models)

When a user interacts with a webpage (click, keypress, submit, etc.), the event doesn’t just fire on one element.

It travels through the DOM tree in a fixed order, which is called Event Flow

Event flow defines how an event propagates (travels) through the DOM hierarchy.

🧩 Visual DOM Structure Example

🔵 1. Event Capturing Phase (Trickling Down)

📌 What happens?

  • The event starts from the top-most element (document)

  • Travels downward toward the target element

  • Also called event trickling

Document → HTML → Body → Div → Button

🔹 Syntax

element.addEventListener("click", handler, true);

👉 The third argument true enables capturing mode

✅ Capturing Example

📌 Why this order?

Because the event moves from parent → child

🧠 When is Capturing Useful?

  • Security validations

  • Intercepting events before they reach the target

  • Complex UI frameworks

  • Closing Modal or Menu

  • Preventing certain interactions early

⚠️ Used rarely in normal applications

🎯 2. Target Phase

📌 What happens?

  • The event reaches the target element

  • Both capturing and bubbling listeners can run here

📌 The target phase is unavoidable

🟢 3. Event Bubbling Phase (Default Behavior)

📌 What happens?

  • The event starts from the target element

  • Travels upward through parent elements

  • This is the default event behavior

Button → Div → Body → HTML → Document

✅ Bubbling Example

📌 Why this order?

Because the event bubbles from child → parent

🚀 Event Delegation (Powered by Bubbling)

📌 What is Event Delegation?

Instead of adding event listeners to many child elements,

add one listener to a parent and handle events using bubbling.

✅ HTML

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

💡 Benefits

✔ Better performance

✔ Works with dynamically added elements

✔ Cleaner code

⛔ Stopping Event Flow

🔹 event.stopPropagation()

Stops the event from moving further up or down

Only button clicked

📊 Capturing vs Bubbling

Feature

Capturing

Bubbling

Direction

Top → Down

Bottom → Up

Default

❌ No

✅ Yes

Common Usage

Rare

Very Common

Used For

Early interception

Event delegation

✅ Ways to Handle Events

1️⃣ Inline HTML Event (❌ Avoid)

<button onclick="alert('Clicked')">Click</button>

❌ Mixes HTML and JS

❌ Hard to maintain

2️⃣ DOM Property Method

const btn = document.querySelector('button');

btn.onclick = () => {
  alert("Clicked");
};

⚠️ Only one handler allowed

New assignment overwrites old one

3️⃣ addEventListener() (✅ Best Practice)

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

✔️ Multiple handlers allowed

✔️ Supports bubbling & capturing

✔️ Clean separation of logic