e.target与e.currentTarget理解

该文章由 leevare 发布于 ,归类于 Javascript

MDN上解释为

e.currentTarget:当事件遍历DOM时,标识事件的当前目标。e.currentTarget总是引用事件处理程序附加到的元素。
e.target:标识事件发生的元素。

举个栗子:

<ul class="list">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
</ul>
<script>
    var list = document.querySelector('.list');
    list.addEventListener('click', function (e) {
        console.log(e.target, e.currentTarget);
        console.log(e.currentTarget === this);  //true
    }, false);
</script>

给列表添加了点击事件,当点击li元素时,e.target为当前的li元素,而e.currentTarget为当前的ul列表。结合上述MDN上的解释,就可以理解为e.currentTarget指向的是添加事件的元素对象,所以e.currentTargetthis指向的是同一对象,而e.target表示的是点击的哪个元素对象触发的事件。

所以,可以使用e.target来进行事件委托,可以查看之前的JavaScript事件委托这篇文章。

注意:在IE6-8中,事件模型与标准不同,使用element.attactEvent添加事件监听,该模型中有一个srcElement属性,等同于target

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒