Understanding Event Bubbling, Delegation, Propagation, and Preventing in JavaScript

In JavaScript, event handling is an important aspect of user interaction. When an event occurs, it not only affects the target element but can also propagate through the DOM in various ways.

Four key concepts:

  1. Event Bubbling
  2. Event Delegation
  3. Event Propagation
  4. Event Preventing

1. Event Bubbling

What is Event Bubbling?

Event Bubbling is the process where an event starts from the target element and then propagates up the DOM tree to its parent elements.

Example:

When you click a inside a

, the click event is not only triggered on the but also propagates up to the
and other parent elements.
id="parent">
   id="child">Click me



  document.getElementById("child").addEventListener("click", function () {
    console.log("Button clicked!");
  });

  document.getElementById("parent").addEventListener("click", function () {
    console.log("Div clicked!");
  });

Result:

  • When you click the button, the console will log: 
Button clicked!
Div clicked!
  • This happens because the event starts from the button and bubbles up to the div.

2. Event Delegation

What is Event Delegation?

Event Delegation is a technique where you attach the event listener to the parent element rather than to each individual child element.

Why use Event Delegation?

  • It reduces the number of event listeners, improving performance.
  • It's useful when the list of elements changes dynamically (e.g., a todo list).

Example:

Instead of attaching a click event to each button, we can attach it to the parent ul element:

id="menu">
  Home
  About
  Contact



  document.getElementById("menu").addEventListener("click", function (event) {
    if (event.target.tagName === "LI") {
      console.log("You clicked:", event.target.innerText);
    }
  });

Benefits:

  • If you later add
  • elements, the event listener still works without needing to attach new listeners.
  • Helps keep the code clean and efficient.

3. Event Propagation

What is Event Propagation?

Event Propagation is the process by which events travel through the DOM in two main phases:

  1. Capturing Phase → The event travels from document down to the target element.
  2. Bubbling Phase → The event travels from the target element back up to document.

Example:

id="outer">
   id="inner">Click Me



  document.getElementById("outer").addEventListener(
    "click",
    function () {
      console.log("Div clicked!");
    },
    true // Capture the event in the capturing phase
  );

  document.getElementById("inner").addEventListener(
    "click",
    function () {
      console.log("Button clicked!");
    }
  );

Result:

If you click the button, the log order will be:

Div clicked!
Button clicked!
  • The
    event is processed first because it's in the capturing phase (with true).
  • Without true, the event would be processed first due to the default bubbling phase.

    • 4. Event Preventing

    What is Event Preventing?

    Event Preventing is used to block the default behavior of the browser, for example:

    • Preventing form submission when no data is entered.
    • Blocking link navigation.
    • Preventing a checkbox from changing its state.

    Example:

    href="https://google.com" id="myLink">Click me


  document.getElementById("myLink").addEventListener("click", function (event) {
    event.preventDefault(); // Prevent the link from redirecting
    console.log("Link clicked but not redirected");
  });

    Result:

    • When you click the link, it does not navigate to Google because event.preventDefault() blocked the default action.

    5. Conclusion

    Term Definition
    Event Bubbling The event propagates from the target element up to its parent elements.
    Event Delegation Attach the event listener to the parent element to handle events for child elements.
    Event Propagation The process of an event traveling through the DOM (Capturing → Target → Bubbling).
    Event Preventing Prevent the default browser behavior using event.preventDefault().

    This should provide a clearer understanding of these important JavaScript concepts and how they can help you handle events more efficiently.

    Visit my blog at: vunguyenit.site