In-depth analysis of JS event bubbling principle: Detailed explanation of event bubbling

Detailed explanation of JS bubbling events: To understand the principle of event bubbling in depth, you need specific code examples

Event bubbling is an important concept in JavaScript. It is used in browsers plays an important role in. By understanding the principle of event bubbling, we can better understand the propagation process of events in the DOM tree, and then handle events flexibly.

1. The principle of event bubbling
Event bubbling means that when an element in the DOM tree triggers an event, the event will be propagated to the superior elements in order from back to front. . To put it simply, the event will start from the triggering element and propagate to the superior elements layer by layer until the root element.

For example, suppose we have the following HTML structure:

<div id="grandparent" onclick="console.log('grandparent clicked')">
  <div id="parent" onclick="console.log('parent clicked')">
    <div id="child" onclick="console.log('child clicked')">
      点击我
    </div>
  </div>
</div>

When we click on the div element with "id as child", the event will first trigger "child clicked" and then continue to bubble Go to the "parent" element, trigger "parent clicked", and finally bubble to the "grandparent" element, trigger "grandparent clicked".

2. Code Example
The following is a specific code example that demonstrates the process of event bubbling:

<div id="grandparent" onclick="console.log('grandparent clicked')">
  <div id="parent" onclick="console.log('parent clicked')">
    <div id="child" onclick="console.log('child clicked')">
      点击我
    </div>
  </div>
</div>

<script>
  // 获取DOM元素
  var grandparent = document.getElementById('grandparent');
  var parent = document.getElementById('parent');
  var child = document.getElementById('child');

  // 给child元素绑定事件监听器
  child.addEventListener('click', function(event) {
    console.log('child clicked');
    event.stopPropagation(); // 阻止事件继续向上级元素冒泡
  });

  // 给parent元素绑定事件监听器
  parent.addEventListener('click', function(event) {
    console.log('parent clicked');
    event.stopPropagation(); // 阻止事件继续向上级元素冒泡
  });

  // 给grandparent元素绑定事件监听器
  grandparent.addEventListener('click', function(event) {
    console.log('grandparent clicked');
    event.stopPropagation(); // 阻止事件继续向上级元素冒泡
  });
</script>

In the above code, we give "grandparent" and "parent" respectively " and "child" elements have click event listeners bound to them. When the "child" element is clicked, "child clicked", "parent clicked" and "grandparent clicked" are output in sequence.

In addition, we used the event.stopPropagation() method to prevent events from bubbling up to upper elements. If you don't use this method, the event will bubble up to the root element.

3. Event proxy
In addition to the above methods, bubbling events can also be handled through event proxy. By binding event listeners to upper-level elements (such as parent elements), instead of binding event listeners to each child element.

The code example is as follows:

<div id="parent">
  <div id="child1">子元素1</div>
  <div id="child2">子元素2</div>
  <div id="child3">子元素3</div>
</div>

<script>
  // 获取parent元素
  var parent = document.getElementById('parent');

  // 通过事件代理，给parent元素绑定点击事件监听器
  parent.addEventListener('click', function(event) {
    var target = event.target;
    var id = target.id;
    console.log('子元素' + id + '被点击');
  });
</script>

In the above code, we bind a click event listener to the parent element "parent" through an event proxy. When any child element of the parent element is clicked, the event listener will be triggered, and the specific child element will be obtained through event.target. Then we can perform corresponding processing based on the id and other information of the child element.

Summary
By deeply understanding the principle of event bubbling, we can better handle various event operations. The code examples provide basic principle explanations and specific code examples, hoping to help understand the concept and application of event bubbling. At the same time, event proxying is also a very common technique that can reduce code redundancy and improve performance.

The above is the detailed content of In-depth analysis of JS event bubbling principle: Detailed explanation of event bubbling. For more information, please follow other related articles on the PHP Chinese website!