Understand and implement the principles and methods of event bubbling and event capturing

The principles and implementation methods of event bubbling and event capturing

Event bubbling (Event Bubbling) and event capturing (Event Capturing) are DOM processing in JavaScript (documentation Object model) two different mechanisms for events. Understanding their principles and implementation can help us better understand and handle events.

Event bubbling principle:
Event bubbling means that when a specific event occurs on a certain DOM element, if the element defines a processing function for the event, then the event will first Triggers on the element, and then bubbles up to the parent element of the element until the handler function of the document root element is triggered.

Implementation method:
In JavaScript, we can use the addEventListener method to add event listeners to elements to achieve event bubbling.
The following is an example:

// HTML代码：
<div id="outer">
  <div id="inner">
    <button id="btn">按钮</button>
  </div>
</div>

// JavaScript代码：
const outer = document.querySelector('#outer');
const inner = document.querySelector('#inner');
const btn = document.querySelector('#btn');

outer.addEventListener('click', function() {
  console.log('外层div被点击！');
});

inner.addEventListener('click', function() {
  console.log('内层div被点击！');
});

btn.addEventListener('click', function(event) {
  console.log('按钮被点击！');
  event.stopPropagation(); // 阻止事件冒泡
});

In the above code, when we click the button, the event bubbling will be triggered step by step upward from the innermost element. First, the click event handler of the button is executed, and then It is the event handling function of the inner div, and finally it is the event handling function of the outer div.

Event capture principle:
Event capture is the opposite of event bubbling. Event capture means starting from the document root element and going down through each element of the DOM tree until a specific event is triggered. The element's event handler is triggered.

Implementation method:
Similarly, we can use the addEventListener method to add event listeners to elements to achieve event capture.
The following is an example:

// HTML代码：
<div id="outer">
  <div id="inner">
    <button id="btn">按钮</button>
  </div>
</div>

// JavaScript代码：
const outer = document.querySelector('#outer');
const inner = document.querySelector('#inner');
const btn = document.querySelector('#btn');

outer.addEventListener('click', function() {
  console.log('外层div被点击！');
}, true);

inner.addEventListener('click', function() {
  console.log('内层div被点击！');
}, true);

btn.addEventListener('click', function() {
  console.log('按钮被点击！');
}, true);

In the above code, when we click the button, the event will start from the document root element and be triggered step by step downwards. The event processing function of the outer div will be executed first. Then the event handling function of the inner div is executed, and finally the click event handling function of the button is executed.

Summary:
Event bubbling and event capturing are two different mechanisms for handling DOM events in JavaScript. They propagate events in different directions along the DOM tree. Event bubbling starts from the trigger element and bubbles up to the document root element; event capture starts from the document root element and propagates down to the trigger element. We can use the addEventListener method to add an event listener to an element, and set whether to use event capturing or bubbling in the third parameter.

The above is the detailed content of Understand and implement the principles and methods of event bubbling and event capturing. For more information, please follow other related articles on the PHP Chinese website!