e.target与e.currentTarget对象的使用区别详解
更新时间：2022年07月04日 15:52:35 作者：Sunshine_Lin
这篇文章主要为大家介绍了e.target与e.currentTarget的使用区别示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
背景
大家开发中经常会跟DOM的事件打交道，也会经常用到e.target和e.currentTarget这两个对象，但是却有很多人根本就不知道这两个有什么区别~~~
冒泡 & 捕获
当你触发一个元素的事件的时候，该事件从该元素的祖先元素传递下去，此过程为捕获，而到达此元素之后，又会向其祖先元素传播上去，此过程为冒泡
<div id="a">
<div id="b">
<div id="c">
<div id="d">哈哈哈哈哈</div>
</div>
</div>
</div>
addEventListener
addEventListener是为元素绑定事件的方法，他接收三个参数：
第一个参数：绑定的事件名
第二个参数：执行的函数
第三个参数：
- false：默认，代表冒泡时绑定
- true：代表捕获时绑定
target & currentTarget
false
我们给四个div元素绑定事件，且addEventListener第三个参数不设置，则默认设置为false
const a = document.getElementById('a')
const b = document.getElementById('b')
const c = document.getElementById('c')
const d = document.getElementById('d')
a.addEventListener('click', (e) => {
const {
target,
currentTarget
} = e
console.log(`target是${target.id}`)
console.log(`currentTarget是${currentTarget.id}`)
})
b.addEventListener('click', (e) => {
const {
target,
currentTarget
} = e
console.log(`target是${target.id}`)
console.log(`currentTarget是${currentTarget.id}`)
})
c.addEventListener('click', (e) => {
const {
target,
currentTarget
} = e
console.log(`target是${target.id}`)
console.log(`currentTarget是${currentTarget.id}`)
})
d.addEventListener('click', (e) => {
const {
target,
currentTarget
} = e
console.log(`target是${target.id}`)
console.log(`currentTarget是${currentTarget.id}`)
})
现在我们点击，看看输出的东西，可以看出触发的是d，而执行的元素是冒泡的顺序
target是d currentTarget是d
target是d currentTarget是c
target是d currentTarget是b
target是d currentTarget是a
true
我们把四个事件第三个参数都设置为true，我们看看输出结果，可以看出触发的是d，而执行的元素是捕获的顺序
target是d currentTarget是a
target是d currentTarget是b
target是d currentTarget是c
target是d currentTarget是d
区别
我们可以总结出：
e.target：触发事件的元素
e.currentTarget：绑定事件的元素
以上就是e.target与e.currentTarget对象的使用区别详解的详细内容，更多关于e.target与e.currentTarget区别的资料请关注脚本之家其它相关文章！
相关文章
前段时间项目需要用到js树，找了好多都不符合项目需求，后来发现了梅花雪树和js框架，类似C#名称空间的用法让我眼前一亮，遂拿来主义，读了几遍代码后就开工了（我是个急性子呵呵），完成了大部分，最近才找出来测试了下。2010-11-11
这篇文章主要为大家介绍了JS组件Bootstrap Select2使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-01-01
ES6出来已经有好几年了，同时很多新特性可以被巧妙地运用在项目中。我想要列下其中一些，希望它们对你有用2018-07-07
很多时候，跟后端接口开发对接时，因为需求的关系，需要前端地区数据跟后端的数据要一一对应，有时候需要的是多维数据，这篇文章主要介绍了JS一维数组转化为三维数组的实现示例，感兴趣的可以了解一下2021-12-12
这篇文章主要为大家详细介绍了小程序实现点击图片放大预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
这篇文章主要为大家详细介绍了小程序实现左滑删除效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
javascript中JSON对象与JSON字符串相互转换实例
这篇文章主要介绍了javascript中JSON对象与JSON字符串相互转换,实例分析了json对象与字符串常用的几种转换技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了动态加载js、css等文件跨iframe实现的方法,需要的朋友可以参考下2014-02-02
这篇文章主要为大家详细介绍了js实现购物车加减以及价格计算功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
我们会常常用到JS的模事件，比如说点击事件，举个简单的例子，点击表单外的“提交”按钮来提交表单，下面为大家介绍下具体的实现2013-11-11
最新评论