Understand the event bubbling mechanism: Why does a click on a child element affect the event of the parent element?

Understand event bubbling: Why does a click on a child element trigger an event on the parent element?

Event bubbling means that in a nested element structure, when a child element triggers an event, the event will be passed to the parent element layer by layer like bubbling, until the outermost parent element . This mechanism allows events on child elements to be propagated throughout the element tree and trigger all related elements in turn.

In order to better understand event bubbling, let's look at a specific example code.

HTML code:

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

JavaScript code:

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

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

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

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

In this example, we have a parent element<div id="parent">, a child element <code><div id="child">, and a button <code><button id="btn"></button>. We added click event listeners to the parent element, child element and button respectively. When they are clicked, the corresponding information will be printed out respectively.

Now let’s run this code and click the button to see what happens.

When the button is clicked, the click events of the button, child element and parent element will be triggered in sequence. This is because event bubbling causes the click event of the child element to bubble up to the parent element, and will continue to be passed to its parent element until it is passed to the outermost element. So in this example, clicking the button will trigger the click event of the button, then the click event of the child element, and finally the click event of the parent element.

Of course, event bubbling does not occur for all events, and some events will not bubble. For example, use the stopPropagation() method to prevent events from continuing to bubble up. In addition, there is a special type of events called capture events, which are the opposite of event bubbling and are passed from outer elements to inner elements.

Understanding event bubbling is very important for front-end development. By understanding the principle of event bubbling, we can better handle event issues with nested elements, reduce code redundancy, and improve code maintainability and performance.

To summarize, event bubbling is an event delivery mechanism that allows events from child elements to bubble upward to the parent element, to the outermost element. Event bubbling can simplify code writing, but you need to pay attention to some special situations and use the stopPropagation() method appropriately. By understanding event bubbling, we can better handle events of nested elements and improve the quality of our code.