Use event.currentTarget rather than event.target most of the time - a podcast by Kent C. Dodds

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 tosome 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 somethingwe'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 eventobject 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 TypeScriptand 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 withTypeScript, 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 botheredme 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 elementand 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 ingeneral 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 theevent. 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 andthen you click on the side one.
Target is going to be the span inside of the button, but if you put theevent 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 wasbound 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 buttonitself 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 bydefault. Hope that's helpful. Have an awesome day. We'll chat with you
later.

Further episodes of 3 Minutes with Kent

Further podcasts by Kent C. Dodds

Website of Kent C. Dodds