Bubbling Phase -- currentTarget vs target

JavaScript
1

I am not sure of my understanding upon differences between event.target and event.currentTarget.

This is how I explain in my words: In bubbling phase, one element that has no event attached, can trigger an event that is attached to an upper element. First is called target and second currentTarget.

Is it a relevant definition? Is there more to say/understand?

1 Like
2

This is a great question. Thank you.

I first went into the MDN documentation and see basically what you have explained.

Google gave me https://medium.com/@florenceliang/javascript-event-delegation-and-event-target-vs-event-currenttarget-c9680c3a46d1

Which I think I understand… but now I have more questions with DOM manipulations and selectors?

3

Hey @yruka, yes that’s correct understanding, e.currentTarget always refer to this (element you have added the listener to). It might be useful in case when you use fat arrow functions as your callback, other times you can just use this:

// using regular function
function handleFunction(e) {
  console.log(this === e.currentTarget); // always true
}
document.addEventListener('click', handleFunction);

// using fat arrow function
// fat arrow functions do not have `this` variable, therefore e.currentTarget must be used
const handleFatArrowFunction = (e) => {
  console.log(e.currentTarget.id); // same as this.id in regular function
};
document.body.addEventListener('click', handleFatArrowFunction);

Hope this will clear things a bit more :slight_smile:

2 Likes
4

thanks. I understand now the contextual difference between currentTarget and ‘this’.