乐趣区

关于前端:所以etarget-和-ecurrentTarget-到底有啥区别呢

前言

大家好,我是林三心,用最通俗易懂的话讲最难的知识点 是我的座右铭,根底是进阶的前提 是我的初心

背景

大家开发中常常会跟 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 绑定 事件的元素

结语

我是林三心,一个热心的前端菜鸟程序员。如果你上进,喜爱前端,想学习前端,那咱们能够交朋友,一起摸鱼哈哈,摸鱼群,加我请备注【思否】

退出移动版