EN/CH Mode

BRUCE_FE CSS Interview Notes - Event Bubbling Principle Analysis

Deep understanding of JavaScript event bubbling and capturing mechanisms, mastering efficient implementation of event delegation, and how to handle event propagation issues in complex UIs.

EN/CH Mode

Lazy to read articles? Then watch videos!

DOM Event Flow: Bubbling and Capturing

When an event occurs on a DOM element, the event propagates in a specific order. According to the W3C event model, event propagation is divided into three phases: capturing phase, target phase, and bubbling phase.

document

html

body

div

button (target)

Click me

↓Capturing Phase

document → html → body → div → button

Bubbling Phase↑

button → div → body → html → document

Capturing Phase (Capturing Phase)

The process of events propagating from the top of the DOM tree (document) down to the target element.

In standard event listeners, setting the third parameter to true captures events in the capturing phase:

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

Bubbling Phase (Bubbling Phase)

The process of events propagating from the target element up to the top of the DOM tree (document).

By default, event handlers are called in the bubbling phase:

element.addEventListener('click', handler); or

element.addEventListener('click', handler, false);

// Simulate event flow
document.addEventListener('click', () => console.log('1. Capture: document'), true);
document.addEventListener('click', () => console.log('6. Bubble: document'), false);

document.body.addEventListener('click', () => console.log('2. Capture: body'), true);
document.body.addEventListener('click', () => console.log('5. Bubble: body'), false);

const button = document.querySelector('button');
button.addEventListener('click', () => console.log('3. Capture: button'), true);
button.addEventListener('click', () => console.log('4. Bubble: button'), false);

// Output order when clicking button:
// 1. Capture: document
// 2. Capture: body
// 3. Capture: button
// 4. Bubble: button
// 5. Bubble: body
// 6. Bubble: document

Event Delegation (Event Delegation)

Event delegation is a pattern that utilizes the event bubbling mechanism to bind event listeners to parent elements and handle child element events by determining the event source. This method effectively reduces the number of event listeners, improves performance, and is particularly suitable for dynamically added elements.

Advantages of Event Delegation

1. Reduce the number of event listeners, save memory
2. Simplify event handling for dynamic elements
3. Reduce code volume and maintenance costs
4. Automatically handle elements added later

// Without event delegation - each button has its own event listener
document.querySelectorAll('.button').forEach(button => {
  button.addEventListener('click', function() {
    console.log('Button clicked:', this.textContent);
  });
});

// Using event delegation - only set one listener on the parent element
document.querySelector('.button-container').addEventListener('click', function(e) {
  // Check if a button was clicked
  if (e.target.classList.contains('button')) {
    console.log('Button clicked:', e.target.textContent);
  }
});

Event Delegation in React

React implements its own event system, automatically using event delegation, attaching most event handlers to the document rather than actual DOM elements.

// React automatically implements event delegation
function TodoList() {
  const [todos, setTodos] = useState(['Learn React', 'Understand event bubbling', 'Practice event delegation']);
  
  const handleItemClick = (index) => {
    console.log(`Clicked item ${index + 1}: ${todos[index]}`);
  };
  
  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index} onClick={() => handleItemClick(index)}>
          {todo}
        </li>
      ))}
    </ul>
  );
}

// React internally only sets one listener at the document level, no need to add for each li

Stopping Event Propagation

Sometimes it's necessary to prevent events from continuing to bubble or capture, preventing parent element event handlers from being triggered. The following methods can be used:

`event.stopPropagation()`

Prevents events from bubbling up the DOM tree, but doesn't prevent other event handlers on the current element.

Common use cases:

- Prevent modal from closing when clicking inside it

- Prevent click events in nested menus from affecting parent menus

`event.stopImmediatePropagation()`

Not only prevents event bubbling, but also prevents subsequent event handlers on the current element from executing.

Common use cases:

- Ensure complete cancellation of event handling under specific conditions

- Control event handling priority when multiple plugins or libraries coexist

// Stop bubbling example
document.querySelector('.child').addEventListener('click', function(e) {
  console.log('Child element clicked');
  
  // Prevent event from bubbling to parent element
  e.stopPropagation();
});

document.querySelector('.parent').addEventListener('click', function() {
  console.log('Parent element clicked - bubbling phase'); // Won't execute
});

// stopImmediatePropagation example
const button = document.querySelector('button');

button.addEventListener('click', function(e) {
  console.log('First handler');
  e.stopImmediatePropagation(); // Prevent subsequent handlers and bubbling
});

button.addEventListener('click', function() {
  console.log('Second handler'); // Won't execute
});

Prevent Default Behavior vs Stop Bubbling

Developers often confuse preventDefault() and stopPropagation(), but they have different purposes:

`event.preventDefault()`

Prevents the default behavior of an element, but doesn't affect event propagation.

1. Prevent page refresh on form submission
2. Prevent link navigation behavior
3. Prevent checkbox selection/deselection
4. Prevent right-click menu display

`event.stopPropagation()`

Prevents event bubbling or capturing, but doesn't affect element default behavior.

1. Prevent event propagation to parent elements
2. Prevent parent element event handlers from being triggered
3. Doesn't prevent form submission, link navigation, etc.
4. Events still complete processing on the current element

// Differences between the two
document.querySelector('a').addEventListener('click', function(e) {
  // Prevent navigation behavior, but event still bubbles to parent element
  e.preventDefault();
  
  // Perform other operations, such as AJAX requests
  console.log('Link clicked, but won't navigate');
});

document.querySelector('.clickable').addEventListener('click', function(e) {
  // Prevent bubbling, but if this element is a link, it will still navigate
  e.stopPropagation();
  
  console.log('Event won't propagate to parent element');
});

// Use both together
document.querySelector('form button').addEventListener('click', function(e) {
  // Prevent form submission
  e.preventDefault();
  
  // Prevent event bubbling
  e.stopPropagation();
  
  console.log('Form won't submit, event won't bubble');
});

🔥 Common Interview Questions

1. Please explain what event bubbling, event delegation, and capturing are?

Concept	Explanation
Event Bubbling	Events start from the triggering element and propagate upward to parent elements, all the way to document and window
Event Capturing	Events start from window and propagate downward to the target element, opposite to the bubbling direction
Event Delegation	Utilize the bubbling mechanism to set event handlers on parent elements and handle child element events through event.target

// Event delegation example
document.querySelector('ul').addEventListener('click', function(e) {
  // Check if li element was clicked
  if (e.target.tagName === 'LI') {
    console.log('Clicked list item: ' + e.target.textContent);
  }
});

2. How to avoid bubbling?

There are three main methods to prevent event bubbling:

event.stopPropagation(): Prevents events from continuing to bubble, but doesn't affect other event handlers on the current element
event.stopImmediatePropagation(): Prevents event bubbling and prevents other event handlers on the current element from executing
Handle events in the capturing phase: Set the third parameter of addEventListener to true to handle events in the capturing phase

// Stop bubbling example
element.addEventListener('click', function(e) {
  e.stopPropagation();
  console.log('Event won't bubble to parent element');
});

// Handle events in capturing phase
parent.addEventListener('click', function(e) {
  console.log('Capturing phase handling, before target element');
}, true);

3. What's the difference between event.stopPropagation() and event.preventDefault()?

Method	Effect	Common Uses
stopPropagation()	Prevents event propagation (bubbling or capturing)	Prevent parent element events from being triggered when clicking child elements
preventDefault()	Prevents the default behavior of an element	Prevent form submission, link navigation, checkbox selection

// preventDefault() example
document.querySelector('a').addEventListener('click', function(e) {
  e.preventDefault(); // Prevent link navigation
  console.log('Link clicked, but won't navigate');
});

// Use both together
document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault(); // Prevent form submission
  e.stopPropagation(); // Prevent event bubbling
  console.log('Form validation failed, won't submit and won't bubble');
});