event.target and event The difference between currenttarget

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:

element.addEventListener(event, function, useCapture)

 

event must. String specifying the event name.

Note: do not use the "on" prefix. For example, use "click" instead of "onclick".

Tip: for all HTML DOM events, you can view our complete HTML DOM Event object reference manual.
function must. Specifies the function to execute when the event is triggered.

When the event object is passed into the function as the first parameter. The type of event object depends on the specific event. For example, the "click" event belongs to the mouseevent object.
useCapture Optional. Boolean value that specifies whether the event is executed during the capture or bubble phase.

Possible values:
  • true - the event handle is executed during the capture phase
  • false- false - default. The event handle executes in the bubbling phase

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

Tags: Javascript

Posted by vigiw on Fri, 15 Apr 2022 08:57:44 +0930