e. The difference between target and e.currenttarget

<div id="big" class="big">
    <div id="middle" class="middle">
    </div>
</div>

.big {
    
    background: red;
    height: 50vh;
    width: 50vh;
}
.middle {
    
    background: green;
    height: 30vh;
    width: 30vh;
}

addEventListener The third parameter of indicates whether to capture , The default is false
true Means to execute capture （ From the outside in ）
false Indicates execution bubbling （ From the inside out ）

1. Executive bubbling

big.addEventListener('click', function (e) {
    
    console.log("big--", "currentTarget:",e.currentTarget, "target:",e.target)
}, false)

middle.addEventListener('click', function (e) {
    
    console.log("middle--", "currentTarget:",e.currentTarget, "target:",e.target)
}, false)

2. Execute capture

big.addEventListener('click', function (e) {
    
    console.log("big--", "currentTarget:",e.currentTarget, "target:",e.target)
}, true)

middle.addEventListener('click', function (e) {
    
    console.log("middle--", "currentTarget:",e.currentTarget, "target:",e.target)
}, true)

3. summary

target： The element that triggered the event
currentTarget： Event bound elements
When you click the parent element , Both point to the same element .
When you click on a child element , The event of the parent element will also trigger , At this time, the parent element event currentTarget Point to parent element ,target Point to child elements , The execution order is bubbling （ Father —— Son ）, Capture （ Son —— Father ）.