currentTarget VS target

老牛浏览 454评论 0发表于 3 年前

target 在事件流的目标阶段。currentTarget 在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的，而当处于捕获和冒泡阶段的时候，target 指向被单击的对象。currentTarget 指向当前事件活动的对象（一般为父级）。

冒泡和捕获

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

事件捕获

事件冒泡

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

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

<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>

处于冒泡阶段

//点击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。所以输出的内容如下：

处于捕获阶段

target:d&currentTarget:a    // a触发
target:d&currentTarget:b    // b触发
target:d&currentTarget:c    // c触发
target:d&currentTarget:d    // d触发

原文链接：currentTarget VS target

暂无评论，快来发表评论吧~

私信

老牛@ilaoniu

老牛，俗称哞哞。单纯的九零后理工小青年。喜欢折腾，爱玩，爱音乐，爱游戏，爱电影，爱旅游...

最后活跃于 7 小时前