Tutorials


JavaScript DOM Bubbling and Capturing


Bubbling and Capturing in JavaScript DOM

In JavaScript, when an event is triggered, it doesn’t just fire on the target element. Instead, the event undergoes a journey through the DOM tree in two phases: capturing and bubbling. Understanding these phases is crucial for effectively managing event handling in your web applications.

Event Propagation Phases

  1. Capturing Phase (Event Capturing)
  2. Bubbling Phase (Event Bubbling)

These phases describe the order in which events are handled in the DOM.

1. Capturing Phase (Trickling Phase)

  • Definition: The capturing phase is the first phase of event propagation. During this phase, the event starts at the root of the document (the window or document object) and moves downwards through the DOM tree toward the target element.

  • Process: The event is passed from the top-most element (e.g., document or window) down to the target element’s parent, and finally to the target element itself.

  • Event Handling: If an event listener is set to capture mode, it will handle the event during this phase, before the event reaches the target element.

  • Example: Capturing a click event from the document to a specific button element.

    <!DOCTYPE html>
<html>
<head>
  <title>Event Capturing</title>
</head>
<body>
  <div id="parent">
    <button id="child">Click Me</button>
  </div>

  <script>
    document.addEventListener('click', () => {
      console.log('Document - Capturing');
    }, true);

    const parent = document.getElementById('parent');
    parent.addEventListener('click', () => {
      console.log('Parent - Capturing');
    }, true);

    const child = document.getElementById('child');
    child.addEventListener('click', () => {
      console.log('Child - Capturing');
    }, true);
  </script>
</body>
</html>

    Expected Output in Console (when you click the button):

    • Document - Capturing
    • Parent - Capturing
    • Child - Capturing

2. Bubbling Phase (Event Bubbling)

  • Definition: After the capturing phase, the event enters the bubbling phase. In this phase, the event starts from the target element and bubbles up (propagates) through its ancestors, eventually reaching the root element (e.g., document or window).

  • Process: The event is passed from the target element upwards through its parent, grandparent, and so on, until it reaches the document.

  • Event Handling: If an event listener is not set to capture mode (default), it will handle the event during this phase, after the event has reached the target element.

  • Example: Bubbling a click event from a button element up to the document.

    <!DOCTYPE html>
<html>
<head>
  <title>Event Bubbling</title>
</head>
<body>
  <div id="parent">
    <button id="child">Click Me</button>
  </div>

  <script>
    const child = document.getElementById('child');
    child.addEventListener('click', () => {
      console.log('Child - Bubbling');
    });

    const parent = document.getElementById('parent');
    parent.addEventListener('click', () => {
      console.log('Parent - Bubbling');
    });

    document.addEventListener('click', () => {
      console.log('Document - Bubbling');
    });
  </script>
</body>
</html>

    Expected Output in Console (when you click the button):

    • Child - Bubbling
    • Parent - Bubbling
    • Document - Bubbling

Choosing Between Capturing and Bubbling

When adding an event listener, you can specify whether you want the event to be handled during the capturing or bubbling phase by using the capture parameter in addEventListener:

element.addEventListener('eventType', eventHandler, useCapture);
  • useCapture: A boolean value where:
    • true indicates the event should be handled in the capturing phase.
    • false (default) indicates the event should be handled in the bubbling phase.

Preventing Event Propagation

Sometimes, you may want to stop an event from propagating further up or down the DOM tree:

  1. stopPropagation(): Prevents the event from moving to the next phase (either bubbling up or capturing down).

    element.addEventListener('click', (event) => {
  event.stopPropagation();
  console.log('Event stopped here!');
});

  2. stopImmediatePropagation(): Stops the event from propagating and prevents other listeners on the same element from being called.

    element.addEventListener('click', (event) => {
  event.stopImmediatePropagation();
  console.log('Event stopped immediately!');
});

Practical Use Cases

  • Event Delegation: Often relies on event bubbling, where you attach an event listener to a parent element and handle events triggered by child elements.
  • Capturing for Specific Control: You might use capturing if you need to handle an event before it reaches the target element, such as intercepting and modifying behavior on the way down the DOM tree.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about