JS中 e.target 和 e.currentTarget 有啥区别呢?

我们在做前端开发时经常会跟DOM的事件打交道,也会经常用到e.targete.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 绑定事件的元素

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » JS中 e.target 和 e.currentTarget 有啥区别呢?

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们