So, what is the difference between e.target and e.currenttarget?

Preface

Hello everyone , I'm Lin Sanxin , Speak the most difficult knowledge points in the most easy to understand words It's my motto , Foundation is the premise of advanced It's my first heart

background

People often talk with... During development DOM Dealing with events , It's also used a lot e.target and e.currentTarget These two objects , But many people don't know the difference between the two ~~~

Bubbling & Capture

When you trigger an element event , The event is passed down from the ancestor element of the element , The process is Capture , And after reaching this element , It will spread to its ancestral elements , The process is Bubbling

    <div id="a">
      <div id="b">
        <div id="c">
          <div id="d"> Ha ha ha ha ha ha ha </div>
        </div>
      </div>
    </div>

addEventListener

addEventListener Is a method of binding events to elements , He takes three parameters ：

• The first parameter ： Bound event name
• The second parameter ： Executed function

• The third parameter ：

  • false： Default , Represents binding when bubbling
  • true： Represents binding on capture

target & currentTarget

false

We give four div Element binding events , And addEventListener The third parameter is not set , The default setting is 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 yes ${target.id}`)
  console.log(`currentTarget yes ${currentTarget.id}`)
})
b.addEventListener('click', (e) => {
  const {
    target,
    currentTarget
  } = e
  console.log(`target yes ${target.id}`)
  console.log(`currentTarget yes ${currentTarget.id}`)
})
c.addEventListener('click', (e) => {
  const {
    target,
    currentTarget
  } = e
  console.log(`target yes ${target.id}`)
  console.log(`currentTarget yes ${currentTarget.id}`)
})
d.addEventListener('click', (e) => {
  const {
    target,
    currentTarget
  } = e
  console.log(`target yes ${target.id}`)
  console.log(`currentTarget yes ${currentTarget.id}`)
})

Now let's click , Look at the output , It can be seen that the trigger is d, The executed elements are in the order of bubbling

target yes d currentTarget yes d
target yes d currentTarget yes c
target yes d currentTarget yes b
target yes d currentTarget yes a

true

We set the third parameter of the four events to true , Let's look at the output , It can be seen that the trigger is d, The elements executed are the order of capture

target yes d currentTarget yes a
target yes d currentTarget yes b
target yes d currentTarget yes c
target yes d currentTarget yes d

difference

We can conclude that ：

• e.target ： Trigger The elements of the event
• e.currentTarget ： binding The elements of the event

Conclusion

I'm Lin Sanxin , An enthusiastic front-end rookie programmer . If you make progress , Like the front , Want to learn the front end , Then we can make friends , Fish together, ha ha , Fish schools , Add me, please note 【 Think no 】