Use event.currentTarget rather than event.target most of the time

Hey there friends so I've been doing some live streaming through discord a

live stream at actually I'm on zoom and then I live stream it to YouTube

and then we chat on Discord. It's a fun time if you haven't joined us then

you should because it's a good time.

So anyway yesterday I was live streaming and I made a discovery thanks to

some of the folks who were hanging out with us in the live stream. So when

you respond to a change event or on submit event for a form or something

we're talking about react here or just vanilla JavaScript Dom APIs when

youYour event handler that gets called is going to get called with an event

object and that object is going to have a target and it's also going to

have a current target.

Well, I always thought that Target is pretty much what you want all the

time and I just realized because I was moving some stuff over to TypeScript

and that's what I've been live streaming is moving my epic react workshops

to TypeScript. And I realized that when you do event.Target with

TypeScript, it says, hey, I realized that this event is on an HTML input

element.

But I don't know what event.Target is going to be so you're going to have

to do some sort of casting or something like that. And that always bothered

me for a long time. Well during the live stream somebody mentioned that I

could use current target instead and that would always be the input element

and and so I tried it and of course it worked and and then it it dawned on

me the implications of how these things work and and using TypeScript in

general and so now I pretty much just use current target pretty much all

the time.

So I've switched from default to target and use current target when I need

to I've,Switched that now I default to current target So let me just

describe that really quick A target is the element that triggered the

event. So let's say you have a button and inside of that button you have a

span that says like a side one and then another span that says side two and

then you click on the side one.

Target is going to be the span inside of the button, but if you put the

event handler on the button itself and then current target is going to be

the button itself. So the current target is going to be where the event was

bound and target is going to be where the event happened.

Well most of the time in react you're going to like that value is going to

be the same either way like especially when we're talking about inputs and

and buttons and stuff most of the time what you really want is the button

itself or or the input is what we're typically looking for or the form.

And so only if you're doing like your own version of event delegation, do

you want to use target? So that's something that I learned yesterday kind

of interesting. Use event dot current target instead of event dot target by

default. Hope that's helpful. Have an awesome day. We'll chat with you

later.