e.target和e.currentTarget的区别？你到底知不知道？

    
      
        
          哈哈哈哈哈

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的区别？你到底知不知道？
文章出自：http://www.csdahua.cn/qtweb/news8/328458.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网