e.target vs e.currentTarget
Hey, I don't really understand the difference between
.target and .currentTarget and when to use them, could someone please explain? Thank you in advance.7 Replies
imagine this:
if you click on a
<p>, the .target is the <p>, because that's the element where the event was triggered on and it bubbled up
however, the element that has the event attached is <body>Was about to say look up Event Bubbling xD
The standard DOM Events describes 3 phases of event propagation: Capturing phase – the event goes down to the element. Target phase – the event reached the target element. Bubbling phase – the event bubbles up from the element.
so,
e.currentTarget points to <body> because it is what has the event handler
^ this is always important to keep in mind
basically, the event is a bouncing ball that goes from <body> to the <p> (capturing), then compresses on the on <p> (target) and then bounces from <p> back to <body> (bubble up)ah okay i see, thank you both. Why does it need to go through the event bubbling process? and what's the importance of the "bubble up" part?
Web Dev Simplified
YouTube
Learn JavaScript Event Listeners In 18 Minutes
🚨 IMPORTANT:
JavaScript Simplified Course: https://javascriptsimplified.com
JavaScript events are one of the most important topics for you to learn. In this video I will dive into everything you need to know about JavaScript events to make sure you completely understand how they work.
📚 Materials/References:
Arrow Functions Video: https://y...
Event delegation is ❤️
thanks, i'll give that a watch. appreciate the help