前言

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

背景

大家开发中常常会跟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是dtarget是d currentTarget是ctarget是d currentTarget是btarget是d currentTarget是a

true

咱们把四个事件第三个参数都设置为 true ，咱们看看输入后果，能够看出触发的是d，而执行的元素是捕捉的程序

target是d currentTarget是atarget是d currentTarget是btarget是d currentTarget是ctarget是d currentTarget是d

区别

咱们能够总结出：

  • e.target ：触发事件的元素
  • e.currentTarget ：绑定事件的元素

结语

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