Bubbling and trapping

Click an element in the page. The event is passed down layer by layer from the ancestor element of the element. This stage is the event capture stage. When the event is passed to this element, it will be passed back one by one until the root element. This stage is the bubbling stage of the event.

As shown in the figure above, event propagation is divided into three stages:

• Capture phase: the transmission from the window object to the target node (from the upper layer to the lower layer) is called "capture phase", and the capture phase will not respond to any events;
• Target phase: triggered on the target node, which is called "target phase"
• Bubbling phase: conduct the window object back from the target node (from the bottom to the top), which is called bubbling phase. Event agent is to use the mechanism of event bubbling to bind the events that the inner layer needs to respond to to to the outer layer;

When binding a click event to an element, we can specify whether to bind in the capture phase or in the bubble phase.

HTML DOM addEventListener() method:

When the third parameter of addEventListener is true, it means binding in the capture phase. When the third parameter is false or empty, it means binding in the bubbling phase.

After you know that the event has such a penetrating process, you can understand the event well in combination with the following examples Target and event currentTarget:

<div id="a">
    <div id="b">
      <div id="c">
        <div id="d"></div>
      </div>
    </div>
</div>

<script>
    document.getElementById('a').addEventListener('click', function(e) {
      console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
    });    
    document.getElementById('b').addEventListener('click', function(e) {
      console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
    });    
    document.getElementById('c').addEventListener('click', function(e) {
      console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
    });    
    document.getElementById('d').addEventListener('click', function(e) {
      console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
    });
</script>

The binding of the above events is in the bubbling stage. When we click the innermost element d, it will output in turn:

target:d&currentTarget:d
target:d&currentTarget:c
target:d&currentTarget:b
target:d&currentTarget:a

From the output, we can see that event Target points to the element causing the trigger event, while event Currenttarget is the element bound to the event, and only the event of the clicked target element Target will be equal to event currentTarget.

If we bind all events in the capture phase, and then click the innermost element d, then event Target will still point to d, because that is the element causing the event to trigger, because event Currenttaget points to the event bound element, so in the capture phase, the first element to come is a, then b, then c, and finally d. Therefore, the output contents are as follows:

target:d&currentTarget:a
target:d&currentTarget:b
target:d&currentTarget:c
target:d&currentTarget:d
reference resources: https://www.cnblogs.com/yzhihao/p/9398917.html
 reference resources: https://www.runoob.com/jsref/met-element-addeventlistener.html