事件获取目标 currentTarget target srcElement 三者之间的区别和联系

最新推荐文章于 2021-06-22 10:18:14 发布

JhonXie

最新推荐文章于 2021-06-22 10:18:14 发布

阅读量1.1k

点赞数 1

原文链接：http://www.cnblogs.com/rachelch/p/9013421.html

版权

currentTarget 指的是触发事件的当前对象，可以是冒泡和捕获的对象，不一定是点击或者鼠标移入等事件的直接触发对象。可以是他的父元素等。

target 指的是事件触发的直接对象。IE有兼容问题。

srcElement 和target相同，firFox不兼容。

获取直接目标对象的兼容写法 var target = e.target || e.srcElement

target 触发事件的源组件。
currentTarget 事件绑定的当前组件。

如果你在父容器上绑定了事件并传参，当你点击父容器时，事件绑定的组件和触发事件的源组件是同一个元素，所以currentTarget 、target 都可以拿到参数，但是当你点击子元素时，target 就不是事件绑定的组件了，所以拿不到参数。
由于事件冒泡的机制，父容器上绑定的事件依然可以触发，所以currentTarget 依然可以拿到参数。

=================================================================================================

MDN中对target的解释为，一个触发事件的对象的引用，当事件处理程序在事件的冒泡或捕获阶段被调用时。
而对于currentTarget，它指的是当事件遍历DOM时，标识事件的当前目标。它总是引用事件处理程序附加到的元素，而不是event.target，它标识事件发生的元素。

举个例子来说明。

事件冒泡阶段

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <ul>
    <li>hello 1</li>
    <li>hello 2</li>
    <li>hello 3</li>
    <li>hello 4</li>
  </ul>
  <script>
    let ul = document.querySelectorAll('ul')[0]
    let aLi = document.querySelectorAll('li')
    ul.addEventListener('click',function(e){
       let oLi1 = e.target  
       let oLi2 = e.currentTarget
        console.log(oLi1)   //  被点击的li
        console.log(oLi2)   // ul
        console.og(oLi1===oLi2)  // false
    })
  </script>
</body>
</html>

我们知道，e.target可以用来实现事件委托，该原理是通过事件冒泡（或者事件捕获）给父元素添加事件监听，e.target 指向引发触发事件的元素，如上述的例子中，e.target 指向用户点击的 li，由于事件冒泡，li的点击事件冒泡到了 ul 上，通过给 ul 添加监听事件而达到了给每一个li添加监听事件的效果，而 e.currentTarget 指向的是给绑定事件监听的那个对象，即 ul，从这里可以发现，e.currentTarget===this 返回 true，而 e.target===this 返回false。e.currenttarget 和 e.target是不相等的。

总结：

e.target 指向触发事件监听的对象。
e.currentTarget 指向添加监听事件的对象。

转载于:https://www.cnblogs.com/rachelch/p/9013421.html

JhonXie

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
事件获取目标 currentTarget target srcElement 三者之间的区别和联系

currentTarget 指的是触发事件的当前对象，可以是冒泡和捕获的对象，不一定是点击或者鼠标移入等事件的直接触发对象。可以是他的父元素等。target 指的是事件触发的直接对象。IE有兼容问题。srcElement 和target相同，firFox不兼容。获取直接目标对象的兼容写法 var target = e.target || e.srcElement t...
复制链接

扫一扫