What are the differences in the response mechanisms between bubbling and non-bubbly events?

What is the difference between bubbling events and non-bubbling events, specific code examples are needed

Events play an important role in programming, it can be the user's Interaction behavior (such as click, drag, etc.), or internal behavior of the browser or web page (such as loading completion, window size change, etc.). According to different event propagation methods, events can be divided into bubbling events and non-bubble events.

Bubbling Events
Bubbling events refer to events that will start from the event target and propagate to the upper elements step by step until they reach the document root node. During the propagation process, the event handler of the parent element will be triggered first, then the event handler of the grandparent element, and so on, until the event handler on the root node.

The following is a sample code for a bubbling event:

HTML code:

<div id="outer">
  <div id="inner">
    <button id="button">点击</button>
  </div>
</div>

JavaScript code:

var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var button = document.getElementById('button');

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

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

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

When the button is clicked, the console will Output the following content:

按钮被点击
内部div被点击
外部div被点击

It can be seen from the output that the bubbling event first triggers the click event handler of the button, then the click event handler of the inner div, and finally the click event handler of the outer div. .

Non-bubbling Events
Non-bubbling events refer to events that will only be triggered on the event target and will not propagate upward. In other words, only the event handler of the clicked element will be executed.

The following is a sample code for a non-bubbling event:

HTML code:

<div id="outer">
  <div id="inner">
    <button id="button">点击</button>
  </div>
</div>

JavaScript code:

var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var button = document.getElementById('button');

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

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

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

When the button is clicked, the console Only the following content will be output:

按钮被点击

As can be seen from the output results, the non-bubbling event only triggered the click event handler of the button.

To sum up, the main difference between bubbling events and non-bubbly events is the way the event is propagated. Bubbling events will propagate from the event target to upper elements, while non-bubbling events will only be triggered on the event target. Understanding the difference between these two events is very important for handling event propagation and optimizing the interactive effect of the page.

The above is the detailed content of What are the differences in the response mechanisms between bubbling and non-bubbly events?. For more information, please follow other related articles on the PHP Chinese website!