What is event bubbling event capture

Event bubbling and event capturing refer to two different ways of event propagation when handling events in the HTML DOM. Detailed introduction: 1. Event bubbling means that when an element triggers an event, the event will propagate from the innermost element to the outermost element. That is to say, the event is first triggered on the trigger element, and then bubbles upward step by step until it reaches the root element; 2. Event capture is the opposite process. The event starts from the root element and is captured step by step until it reaches the trigger event. Elements.

Operating system for this tutorial: Windows 10 system, Dell G3 computer.

Event bubbling and event capturing refer to two different ways of event propagation when handling events in the HTML DOM.

Event bubbling means that when an element triggers an event, the event will propagate from the innermost element to the outermost element. That is, the event first fires on the triggering element and then bubbles up until it reaches the root element.

Event capturing (Event Capturing) is the opposite process. The event starts from the root element and is captured step by step until it reaches the element that triggered the event.

In the HTML DOM, by default, events are propagated by event bubbling. That is, the event first fires on the triggering element and then bubbles up until it reaches the root element.

You can clearly specify the event propagation method through the addEventListener method. The addEventListener method can accept three parameters, which are the event type to be monitored, the event processing function, and a Boolean value used to specify the event propagation method. When the Boolean value passed in is true, it means event capturing is used; when the Boolean value passed in is false or omitted, it means event bubbling is used.

For example, the following code demonstrates the difference between event capturing and event bubbling:

<div id="outer">
  <div id="inner">
    <button id="button">点击</button>
  </div>
</div>
<script>
var outer = document.getElementById(&#39;outer&#39;);
var inner = document.getElementById(&#39;inner&#39;);
var button = document.getElementById(&#39;button&#39;);
outer.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件冒泡 - 外层元素&#39;);
}, false);
inner.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件冒泡 - 内层元素&#39;);
}, false);
button.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件冒泡 - 按钮&#39;);
}, false);
outer.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件捕获 - 外层元素&#39;);
}, true);
inner.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件捕获 - 内层元素&#39;);
}, true);
button.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件捕获 - 按钮&#39;);
}, true);
</script>

After running the above code, when the button is clicked, the event processing functions of the event capture phase and the event bubbling phase will be triggered in sequence, and the corresponding information will be output on the console.

The above is the detailed content of What is event bubbling event capture. For more information, please follow other related articles on the PHP Chinese website!