currentTarget VS target

时间 2019-11-17

标签 currenttarget target 繁體版

原文原文链接

target在事件流的目标阶段；javascript

currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是同样的，而当处于捕获和冒泡阶段的时候，html

target指向被单击的对象java

currentTarget指向当前事件活动的对象（通常为父级）。ui

冒泡和捕获

当点击页面的一个元素的时候，事件会从这个元素的祖先元素逐层传递下来，这个过程成为事件捕获；当事件传递到这个元素以后，又会把事件逐成传递回去，直到根元素为止，这个阶段是事件的冒泡阶段。spa

事件捕获

事件冒泡

咱们为一个元素绑定一个点击事件的时候，能够指定是要在捕获阶段绑定或者换在冒泡阶段绑定。当addEventListener的第三个参数为true的时候，表明是在捕获阶段绑定，当第三个参数为false或者为空的时候，表明在冒泡阶段绑定。code

知道事件有这么一个穿透的过程以后，结合下面的例子，就能够很好来理解event.target和event.currentTarget：cdn

<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>
复制代码

处于冒泡阶段htm

//点击d元素的时候；
    target:d&currentTarget:d    // d触发
    target:d&currentTarget:c    // c触发
    target:d&currentTarget:b    // b触发
    target:d&currentTarget:a    // a触发
复制代码

从输出中咱们能够看到，event.target指向引发触发事件的元素，而event.currentTarget则是事件绑定的元素，只有被点击的那个目标元素的event.target才会等于event.currentTarget。对象

将上述<script>标签里的事件绑定的第三个参数设置为true时，事件处于捕获阶段，而后仍是点击最里层的元素d，这时event.target还依旧会指向d，由于那是引发事件触发的元素，由于event.currentTaget指向事件绑定的元素，因此在捕获阶段，最早来到的元素是a,而后是b,接着是c,最后是d。因此输出的内容以下：blog

处于捕获阶段

target:d&currentTarget:a    // a触发
    target:d&currentTarget:b    // b触发
    target:d&currentTarget:c    // c触发
    target:d&currentTarget:d    // d触发
复制代码