preface

Hello everyone, I am Lin Sanxin, with the most easy to understand the most difficult knowledge points is my motto, the basis is advanced premise is my initial mind

background

E.target and E.currenttarget are two objects that many people don’t know the difference between

Bubble & capture

When you fire an event for an element, the event is passed down from the element’s ancestor element, a process called capture, and when it reaches the element, it propagates to its ancestor element, a process called bubbling

    <div id="a">
      <div id="b">
        <div id="c">
          <div id="d">hahahaha</div>
        </div>
      </div>
    </div>
Copy the code

addEventListener

AddEventListener is a method that binds events to elements and takes three arguments:

  • First parameter: the name of the bound event
  • The second argument: the function to execute
  • The third parameter:
    • False: the default value is bubble binding
    • True: binding during capture

target & currentTarget

false

If we bind events to the four div elements and the third addEventListener parameter is not set, the default 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 is${target.id}`)
  console.log(` currentTarget is${currentTarget.id}`)
})
b.addEventListener('click'.(e) = > {
  const {
    target,
    currentTarget
  } = e
  console.log(` target is${target.id}`)
  console.log(` currentTarget is${currentTarget.id}`)
})
c.addEventListener('click'.(e) = > {
  const {
    target,
    currentTarget
  } = e
  console.log(` target is${target.id}`)
  console.log(` currentTarget is${currentTarget.id}`)
})
d.addEventListener('click'.(e) = > {
  const {
    target,
    currentTarget
  } = e
  console.log(` target is${target.id}`)
  console.log(` currentTarget is${currentTarget.id}`)})Copy the code

Now if we click and look at the output, we can see that d is triggered, and the elements that are executed are bubbling order

Target is D currentTarget d currentTarget C Target is D currentTarget B Target is D currentTarget IS ACopy the code

true

We set the third parameter of each of the four events to true, and when we look at the output, we can see that d is fired and the elements executed are captured in the order in which they are executed

Target is D currentTarget is A Target is D currentTarget is B Target is D currentTarget is C Target is D currentTarget is DCopy the code

The difference between

We can conclude that:

  • e.target:The triggerElements of an event
  • e.currentTarget:The bindingElements of an event

conclusion

I am Lin Sanxin, an enthusiastic front-end novice programmer. If you progress, like the front end, want to learn the front end, then we can make friends, touch fish ha ha, touch fish, point this –> touch fish boiling point