html5函数里面传入event,在vue事件中传入$event，使用e.target和e.currentTarget有什么区别...

这个问题我觉得还是比较重要的，因为我们只要做过vue项目，基本会遇到这个问题。然而很多人是随便用，感觉都差不多，其实他们是有本质区别的，一旦没用好，随之扑面而来的就是bug

用概念区分

event.currentTarget始终指向事件所绑定的元素，而event.target指向事件发生时的元素。

示例说明

记住，我通过换行符隔开，方便测试



点击a时触发openPlays，传入当前对象

openPlays (e) {

console.log(e.target,e.currentTarget)

}

当点击“i”区域之外时：

当点击a中的“i”时：

小结

从上面的结果可以看出，不管你点击的是a本身或者a里面任何子集，currentTarget其获取到的对象都为绑定事件的a；当使用target时，如果你点击到a元素则传a元素，如果点击到a之中的某个子级元素则传a之中的某个元素。一句话，target会变，点到谁身上返回谁，currentTarget不会变，返回事件源对象。另外要强调一个问题，在我们直接打印例如：console.log(e)时候，你会发现控制台打印出来的currentTarget是null，有些同学可能一时就慌神了，具体原因我也没找到确切答案，但你打印e.currentTarget你会发现，这个值是肯定会存在的。

「梦想一旦被付诸行动，就会变得神圣，如果觉得我的文章对您有用，请帮助本站成长」

分享到：

打赏

谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏