[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)