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

foreword

Hello everyone, I'm Lin Sanxin, uses the most simple and easy-to-understand words to describe the most difficult knowledge points. is my motto. is the premise of .

background

We often deal with DOM events in development, and often use the two objects e.target and e.currentTarget , but many people do not know the difference between these two at all~~~

Bubble & Capture

When you trigger the event of an element, the event is passed down from the ancestor element of the element. This process is captured by . After reaching this element, it will be propagated to its ancestor element. This process is bubbling with

    <div id="a">
      <div id="b">
        <div id="c">
          <div id="d">哈哈哈哈哈</div>
        </div>
      </div>
    </div>

addEventListener

addEventListener is a method for binding events to elements, it receives three parameters:

• The first parameter: the name of the event to be bound
• The second parameter: the function to execute

• The third parameter:

  • false: default, which means binding when bubbling
  • true: Represents binding when capturing

target & currentTarget

false

We bind events to four div elements, and the third parameter of addEventListener is not set, then 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是${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}`)
})

Now we click and look at the output, we can see that the trigger is d, and the executed element is the order of bubbling

target是d currentTarget是d
target是d currentTarget是c
target是d currentTarget是b
target是d currentTarget是a

true

We set the third parameter of the four events to true , we look at the output results, we can see that the trigger is d, and the executed element is the order of capture

target是d currentTarget是a
target是d currentTarget是b
target是d currentTarget是c
target是d currentTarget是d

the difference

We can conclude that:

• e.target : The element that triggered the event
• e.currentTarget : Binding element of event

Epilogue

I'm Lin Sanxin, an enthusiastic front-end rookie programmer. If you are motivated, like the front-end, and want to learn the front-end, then we can make friends and fish together haha, touch the fish group, add me, please note [Si No]