[Javascript] event target and currentTarget

<Parent>
    <child>
       <button />
    </child>
 </Parent>

function onClick(event) {
  console.log('target: ', event.target) // button
  console.log('currentTarget', event.currentTarget) //parent
}

parent.addEventListener('click', onClick)

 

currentTarget may change and will be null after event is dispatched.

function onClick(event) {
    console.log('currentTarget', event.curretTarget) //parent
    
    setTimeout(() => {
      console.warn('After timeout')
      console.log('event.currentTarget', event.currentTarget) // null
    })
  })
}

parent.addEventListener('click', onClick)

To resolve the issue:

function onClick(event) {
    console.log('currentTarget', event.curretTarget) //parent
    const captured = event.currentTarget
    
    setTimeout(() => {
      console.warn('After timeout')
      console.log('event.currentTarget', event.currentTarget) // null
      console.log('captured.currentTarget', captured) // parent
    })
  })
}

parent.addEventListener('click', onClick)