e.target与e.currentTarget理解
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.currentTarget
与this
指向的是同一对象,而e.target
表示的是点击的哪个元素对象触发的事件。
所以,可以使用e.target
来进行事件委托,可以查看之前的JavaScript事件委托这篇文章。
注意:在IE6-8中,事件模型与标准不同,使用element.attactEvent
添加事件监听,该模型中有一个srcElement
属性,等同于target
。
如果您觉得本文对您有用,欢迎捐赠或留言~
- 本博客所有文章除特别声明外,均可转载和分享,转载请注明出处!
- 本文地址:https://www.leevii.com/?p=988