e.target vs e.currentTarget

Hey, I don't really understand the difference between

.target

.target

and

.currentTarget

.currentTarget

and when to use them, could someone please explain? Thank you in advance.

Ἔ

ἔρως•10/11/24, 12:12 AM

imagine this:

Ἔ

ἔρως•10/11/24, 12:14 AM

if you click on a , the

.target

.target

is the , because that's the element where the event was triggered on and it bubbled up

Ἔ

ἔρως•10/11/24, 12:14 AM

however, the element that has the event attached is

b1mind•10/11/24, 12:14 AM

Was about to say look up Event Bubbling xD

b1mind•10/11/24, 12:14 AM

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.

Ἔ

ἔρως•10/11/24, 12:14 AM

so, points to because it is what has the event handler

Ἔ

ἔρως•10/11/24, 12:15 AM

^ this is always important to keep in mind

Ἔ

ἔρως•10/11/24, 12:17 AM

basically, the event is a bouncing ball that goes from to the (capturing), then compresses on the on (target) and then bounces from back to (bubble up)

snxxwyyOP•10/11/24, 12:53 AM

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?

b1mind•10/11/24, 1:08 AM

https://www.youtube.com/watch?v=XF1_MlZ5l6M

YouTubeWeb Dev Simplified

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...

b1mind•10/11/24, 1:09 AM

Event delegation is

snxxwyyOP•10/11/24, 1:09 AM

thanks, i'll give that a watch. appreciate the help