The difference between JavaScript event bubbling and event capturing

What is the difference between js event bubbling and capturing, specific code examples are needed

Event bubbling and event capturing are the two stages of event processing in JavaScript. Before understanding them, we need to understand what DOM events are.

In HTML, when users interact with elements on the page, such as clicking buttons, scrolling windows, etc., these behaviors are called events. The DOM (Document Object Model) event refers to the JavaScript code that is executed when the event occurs.

In JavaScript, event handlers can be bound to elements through addEventListener or by directly assigning methods to attributes of the element. Regardless of which method is used, events are propagated to and from elements in a specific order.

Next, we will take a deeper look at event bubbling and event capturing, and give specific code examples.

Event bubbling:
Event bubbling means that events start to propagate from the innermost element and gradually propagate outward to the outermost element. That is, the event is first triggered on the current element, and then propagated to the parent element, all the way to the outermost element.

For example, we have a parent element div with the following HTML structure, and its child element span:

<div id="parent">
  <span id="child">Hello World!</span>
</div>

If we add a click event to the child element span, as follows:

var child = document.getElementById('child');
child.addEventListener('click', function() {
  console.log('child element clicked!');
});

When we click the child element span, the event will be propagated in the following order:

1. The click event on the child element span is triggered and "child element clicked!" is output.
2. Events are propagated to the parent element div, and the parent element will also execute the corresponding event handler (if any).
3. If there are higher-level elements, the event will be passed to the outermost element.

Event capture:
Event capture means that events start to propagate from the outermost element and propagate inward to the innermost element step by step. That is, the event is triggered first on the outermost element and then propagates to child elements until the innermost element.

To implement event capture in JS, we need to pass an optional parameter called useCapture when adding an event listener. By default, the value of useCapture is false, that is, the event will be propagated in a bubbling manner. If we set useCapture to true, events will be propagated in a captured manner.

For example, we have a parent element div with the following HTML structure, and its child element span:

<div id="parent">
  <span id="child">Hello World!</span>
</div>

If we add a click event to the parent element div, as follows:

var parent = document.getElementById('parent');
parent.addEventListener('click', function() {
  console.log('parent element clicked!');
}, true);

When we click on the child element span, the events will be propagated in the following order:

1. The click event on the outermost element div is triggered, and "parent element clicked!" is output.
2. The event is propagated inward to the child element span, and the child element will also execute the corresponding event handler (if any).

It should be noted that although the order of event propagation can be reversed, event bubbling is actually commonly used.

To sum up, event bubbling and event capturing are the two stages of event processing in JavaScript. Understanding their differences and usage can help us better control the delivery and processing of events. In actual development, we can choose to use event bubbling or event capturing as needed, or use both at the same time to handle complex event logic.

The above is the detailed content of The difference between JavaScript event bubbling and event capturing. For more information, please follow other related articles on the PHP Chinese website!