Use event.currentTarget rather than event.target most of the time 3 Minutes with Kent

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.