Why does event bubbling trigger multiple times?

Why is the event bubbling triggered twice?

In front-end development, we often encounter the concept of event bubbling. Event bubbling means that when a specific event of an element is triggered on the page, the event will be passed layer by layer to the upper element until it is finally passed to the document object.

However, sometimes we may encounter the problem of event bubbling and triggering twice, even if we only bind the event listener once. So why does the phenomenon of repeated triggering occur? Let’s dive into the possible reasons below.

First of all, we need to clarify a concept, that is, how event bubbling works in the browser. When the browser triggers a specific event on an element, it will traverse the DOM tree starting from the element and check whether each parent element has an event handler bound to the event. If an event handler is found, the browser executes the handler and continues up the traversal up to the document object. This process is event bubbling.

However, it should be noted that event bubbling will not only be passed to the parent element, but also to the ancestor elements. That is, event bubbling repeatedly triggers event handlers on parent and ancestor elements. This may cause the event to be triggered twice.

So the question is, why does event bubbling pass to ancestor elements? This is because when binding event listeners, we usually use event delegation. That is to say, bind the event listener to the parent element, and then let the parent element handle the event instead of its child element through event bubbling.

If the event listener we bind exists on both the parent element and the ancestor element, the event bubbling will be triggered twice. This is because as the browser traverses up the DOM tree, it checks whether each parent element and ancestor element has the same event handler bound to it. If present, the browser will execute them.

In order to better understand this problem, a specific code example is provided below:

HTML code:

<div id="parent">
  <div id="child">Click me!</div>
</div>

JavaScript code:

var parent = document.getElementById('parent');
var child = document.getElementById('child');

parent.addEventListener('click', function() {
  console.log('Parent Clicked!');
});

child.addEventListener('click', function() {
  console.log('Child Clicked!');
});

above In the code, we bind event listeners for click events on both the parent element and the child element. When we click on the child element, the console will output the results twice: "Child Clicked!" and "Parent Clicked!". This is because the event bubbling is triggered twice, first the event listener of the child element is executed, and then the event listener of the parent element is executed.

In order to avoid the problem of event bubbling being triggered twice, we can use the stopPropagation() method to prevent the event from continuing to bubble up. For example, in the above code, we can add a line of code in the event listener of the child element:

child.addEventListener('click', function(event) {
  console.log('Child Clicked!');
  event.stopPropagation();
});

After using the stopPropagation() method, only the event listener of the child element is executed, and the event of the parent element The listener will no longer be executed. In this way, we can avoid the problem of event bubbling and triggering twice.

To summarize, the reason why event bubbling will be triggered twice is because the event bubbling will be passed to the event handlers on the parent element and ancestor elements. To solve this problem, we can use the stopPropagation() method to prevent the event from bubbling upward.

I hope that through the introduction of this article, readers can have a more comprehensive understanding of the principle of event bubbling and why it is triggered twice, and can find an effective solution when encountering this problem in actual development. Method.

The above is the detailed content of Why does event bubbling trigger multiple times?. For more information, please follow other related articles on the PHP Chinese website!