BRIEFS logo BRIEFS

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

01/14/2021 , 2m, 56s

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.