event.target与event.currentTarget的差异（完整版）

1.什么是target？什么是currentTarget？

event.target 是发生事件的元素或触发事件的元素。
event.currentTarget 是我们在其上显式附加事件处理程序的元素。(是事件绑定的元素)

2.target和currentTarget的区别：

target：触发事件的元素。
currentTarget：事件绑定的元素。
两者在没有冒泡的情况下，是一样的值，但在用了事件委托的情况下event.target指向引起触发事
件的元素，而event.currentTarget则是事件绑定的元素。
小结：currentTarget始终是监听事件者，绑定谁就是谁，而target是事件的真正发出者，点谁就是
谁。

一、针对部分监听事件，例如onclick：

1、如果你点击的是添加事件元素的子元素，就用currentTarget来获取父元素的值，用target来获取
子元素的值；
2、如果没有子元素，就在本元素上添加事件，target和currentTarget效果一样。

二、针对部分监听事件，例如onmouseenter：

1、如果你点击的是添加事件元素的子元素。使用currentTarget或者target都是获取父元素的值；
2、如果没有子元素，就在本元素上添加事件，target和currentTarget效果都是获取到自身元素的
值。

三、针对部分监听事件（比如onclick）：

target指向的是事件触发事的元素。
target在事件流的目标阶段，没有事件流的捕获和冒泡。点击始终是指向被单击的对象

currentTarget指向事件绑定的元素。
当事件流处在目标阶段的时候（就是点击当前事件绑定对象），指向被单击的对象
当处于捕获和冒泡阶段的时候，指向当前事件活动的对象（一般为父级）。

什么时候使用target和currentTarget？

1.target在事件流的目标阶段
当事件流处在目标阶段的时候（就是点击当前事件绑定对象），指向被单击的对象
当需要获取不同子组件绑定的属性，比如点击某个组件拿到该组件上绑定的属性，可以使用
event.target
2 . currentTarget在事件流的捕获，目标及冒泡阶段。
当事件流处在目标阶段的时候（就是点击当前事件绑定对象），指向被单击的对象
当处于捕获和冒泡阶段的时候，也是指向当前事件绑定的对象。
始终都可以找到当前绑定事件的对象，所以开发人员一般使用event.currentTarget属性，event.target
属性很少使用
一般情况下，建议只使用 currentTarget 对象，因为它能拿到我们想要的参数属性
如果我们需要获取不同子组件绑定的属性，比如点击某个组件拿到该组件上绑定的属性，才用 target 对象
4.current的不足：
通过查询MDN了解到，currentTarget在Safari on iOS10.0以下的版本中兼容性较差。

event.target与event.currentTarget的差异相关推荐

event.target与event.currentTarget的区别
event.target事件和event.currentTarget事件,经常被人们混淆.因为它们两个有时候的返回值是完全一样的,因此很具有迷惑性.然而如果真的是一样的,那当初官方就不会做这样没有意义 ...
event.target【转载】
[转载] 1.this和event.target的区别: js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素: 2.this和ev ...
[vue] 在vue事件中传入$event，使用e.target和e.currentTarget有什么区别？
[vue] 在vue事件中传入$event,使用e.target和e.currentTarget有什么区别? event.currentTarget指向事件所绑定的元素,而event.target始终 ...
JS event.currentTarget( ) 和 event.target( ) 的区别
这两个方法都是监听事件触发的目标.区别是,event.currentTarget( ) 会返回当前触发事件的元素:而event.target( ) 会返回触发事件触发的源头元素. 用法:可以用来监听触 ...
JavaScript中的Event.target
event.target 一般情况下我们获取目标事件源都是谁是调用者谁就是事件源,但是当有批量的DOM需要操作的时候,要判断哪一个dom是事件源就不是很明确了,使用e.target可以准确地获取事件源 ...
JS中event.target事件委派遇到多重子节点的元素导致子节点遮挡父节点事件的解决方法
1.问题描述事件委派在重复给多个子节点添加相同方法时或者即时添加子节点时很优秀,但如果子节点中还含有自己的子节点,就会发生遮挡. 2.问题分析 event.target会找到使绑定节点执行该事件的触 ...
js中event，event.srcElement，event.target在IE和firefox下的兼容性
1.window.event对象 IE:有window.event对象 firefox:没有window.event对象.可以通过函数的参数传递event对象.例如:οnmοusedοwn=func ...
事件源event.target
今天在了解检测浏览器是否能播放不同类型的视频时发现以下代码 <script> function supportType(e,vidType,codType){ myVid=document ...
由event target引发的关于事件流的一连串思考（二）
阻止事件冒泡 W3C的方法是ev.stopPropagation(),IE则是使用ev.cancelBubble = true. 先不谈IE的私有方法,首先讨论一个问题:ev.stopPropagat ...

event.target与event.currentTarget的差异