Target In the target phase of the event flow;

CurrentTarget The capture, target, and bubbling phases of the event stream. Both directions are the same only when the flow of events is in the target phase, while in the capture and bubble phase,

Target points to the clicked object

CurrentTarget points to the object (usually the parent) of the current event activity.

Bubble and capture

When an element is clicked on the page, events are passed down from the element’s ancestor layer by layer, a process called event capture. When an event is passed to this element, it is passed back up to the root element, which is the bubbling phase of the event.

Event capture

The event bubbling

When we bind a click event to an element, we can specify whether to bind during the capture phase or to bind during the bubble phase instead. When the third addEventListener parameter is true, it is bound in the capture phase. When the third addEventListener parameter is false or empty, it is bound in the bubble phase.

Knowing that events have such a penetrating process, it’s a good idea to understand event.target and event.currenttarget by combining the following examples:

<body>
    <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>
</body>
Copy the code

It’s bubbling

    // Click the d element;
    target:d&currentTarget:d    / / d trigger
    target:d&currentTarget:c    / / c trigger
    target:d&currentTarget:b    / / b trigger
    target:d&currentTarget:a    / / a trigger
Copy the code

As you can see from the output, event.target refers to the element that triggered the event, and Event. currentTarget is the element bound to the event.

Set the third parameter of the event binding in the

In the capture phase

    target:d&currentTarget:a    / / a trigger
    target:d&currentTarget:b    / / b trigger
    target:d&currentTarget:c    / / c trigger
    target:d&currentTarget:d    / / d trigger
Copy the code