Why does event bubbling trigger twice?

Why is the event bubbling triggered twice?

Event bubbling (Event Bubbling) means that in the DOM, when an element triggers an event (such as a click event), the event will bubble up from the element to the parent element until it bubbles to the top-level document object. Event bubbling is part of the DOM event model, which allows developers to bind event listeners to parent elements, so that when child elements trigger events, the events can be captured and processed through the bubbling mechanism.

However, sometimes developers encounter the situation where the event bubbles up and triggers twice, which usually occurs in nested elements. To better understand why it triggers twice, let's look at a specific code example.

HTML code is as follows:

<div id="parent">
  <div id="child">
    <button id="button">点击我</button>
  </div>
</div>

JavaScript code is as follows:

var parent = document.getElementById("parent");
var child = document.getElementById("child");
var button = document.getElementById("button");

parent.addEventListener("click", function(event) {
  console.log("父元素被点击");
});

child.addEventListener("click", function(event) {
  console.log("子元素被点击");
});

button.addEventListener("click", function(event) {
  console.log("按钮被点击");
  event.stopPropagation();
});

In the above code, we have a parent element, a child element and a button, which are respectively bound to click Event monitoring. When we click a button on a web page, the event will be passed from the child element to the parent element according to the bubbling rules.

Now, let’s simulate a button click. When we click the button, the console will print the following output:

按钮被点击
子元素被点击

Why is it triggered twice?

This is because event bubbling starts from the triggering element and bubbles up to the parent element in sequence, and in this process it passes through two layers of child elements and parent elements. When we click the button, the click event of the button is first triggered and "the button is clicked" is printed. Then, the event continues to bubble up to the child element, triggering the click event of the child element, and printing out "child element was clicked". Finally, the bubbling continues to the parent element, triggering the parent element's click event.

How to prevent the event from bubbling and triggering twice?

We can prevent the event from continuing to bubble by calling event.stopPropagation() in the button's click event handler. In the above code, we have used this method in the click event of the button. When we click the button again, the console will only print out "button clicked" without continuing to bubble up to child and parent elements.

In summary, event bubbling will be triggered twice usually in nested elements. When an element triggers an event, the event will bubble up from the triggering element to the parent element. Until it bubbles up to the top-level document object. However, we can prevent the event from continuing to bubble by calling event.stopPropagation(), thereby preventing the event from being triggered twice.

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