Custom Event Handlers

[00:00:00]
>> So we're gonna do now we're gonna graduate on to doing more advanced event handlers. So let's take for instance the newRestaurant.name that we have here. For those that don't know V model is a directive that lets you automatically update the value of the input and track it while also simultaneously checking the input event and then updating set field.

[00:00:17]
So to show that in execution here, what we're gonna do, actually I'll just put it here. Restaurant or is it new restaurant, newRrestaurant.name, newRestaurant.name, okay? So here, when we go inside of restaurants new and I type, you'll notice that everything's updated as you want. But what have we only wanted to update say like when someone hits the space bar?

[00:00:40]
Let's just do something a little bit different. Well, the way we would actually do this we would need to hijack what's going on. So V model now no longer is work because this is going to capture everything that we type on it. So what we're going to do now is we're gonna break V model up into its two distinctive parts and that's what all people don't realize is that, V model is really just syntactic sugar for what I'm about to show you.

[00:00:58]
So first thing first is your basically essentially binding the value of the element to this dynamic thing, newRestaurant.name. And then what it normally does with the V model is it also does an input event that will then basically say, again, this is a little bit pseudocode, but event.target.value.

[00:01:17]
That's like at a high level, what it's essentially doing, it is combining all that into one piece. Making your life a lot easier because most of the time we're not trying to hijack the thing, but let's say we wanna hijack the thing in that we only wanted to update whenever we hit the space bar.

[00:01:30]
So I'll use the update name function that we're going to call whenever this is being hit. So now if we go ahead and declare update name. It's a function, and to show that it works, we're just gonna log. Hello, all right, so over here we'll see that when I go ahead and type, you see that hello is being triggered.

[00:01:54]
That works as expected, but we wanna do something. We wanna do a little bit more than that. We wanna actually inspect what's going. If this is your first time working with custom events, what you need to know is that, when you have this event here, it's automatically past the event object as part of its default parameter.

[00:02:11]
So here what we can do is if I go ahead, I'm just gonna type out event oftentimes referred to as E, but I'm gonna type event and let's log out the event this time. We'll see now that when we go to New and type, you see that the input event is actually being called and this is great because what this means is we can now do something with said thing, right?

[00:02:31]
It has the data, it has whatnot and okay. So, this is pretty good. But you'll notice though, actually, the browser actually giving us a hint already. But it's not just any event, it's an input event and so what we can do right is because right now if we try to do like event.data it's not really going to tell us anything because here's the thing about events.

[00:02:50]
Is that at least in the primary or in the form that it's in right now there's no typing on, it right it's any. So you might be like, okay, I got this, I'm gonna call it an event, yeah, I'm smart and then you're gonna realize, this is pretty generic.

[00:03:04]
It's just like this is an event that takes place in the DOM, that is essentially the any events to be totally honest, yes, you're being descriptive that it's an event. But really, we could use a little bit more help. And so what we do know is that it's an input event.

[00:03:20]
And when you get the input event, now the magic happens because all the stuff that you can want to say, yep, all the properties that come with that object now suddenly appeared in your autocomplete. So we can basically do that, okay, let's log the data for this for example or maybe let's see, do they have code?

[00:03:38]
Maybe code would be better. Nope, not on this, that's right I know why that's it but it's fine, okay, so then here, so we'll log the data. So we come back in here now let me clear the console. Asdf space, okay, great. So now what did I say?

[00:03:54]
I said I wanted to assign it when that happens. So what we can do is we can say if data, if event.data is equal to the space character, then what do we do? We can say new restaurant.name is actually a .value.name. See, it'll get you, that will be equivalent to event.target.

[00:04:17]
There you go. So again, data itself is not auto completing for whatever reason, you're thinking like event that target like, why is it and I think basically the reason why we can autocomplete this, all right. You're not seeing value anywhere is because TypeScript doesn't know what event.target is, for whatever reason.

[00:04:34]
And so what you can do instead though is you can basically tell that, you can tell TypeScript by wrapping your value in a parenthesis, and using type casting that is an HTML element. So your event target you know, because again you're the one coding this, you're like, I got this it's not gonna random and then we get swapped out.

[00:04:55]
And from here this is where the value property actually does live here, so now if we save this and swap that over then, yay. Wait, let me clear the console first space. Now venue A, the full value actually does appear. So here's the thing about the syntax though is that it takes a little getting used to because this is not naturally how we would write it.

[00:05:20]
Honestly, most of us would expect to just do event.target.value. And while technically it'll work. So let's see expected me force this real quick. Okay, so I'm gonna let TypeScript yell at me for now, this is fine. That's your boo yo. Yeah, so it does technically work. And so this is where I honestly I think part of the issue sometimes comes in with when people start opting into TypeScript very like wholeheartedly.

[00:05:48]
Is that they get into this weird thing where they're like, wait, this thing that I'm used to doing now feels really awkward like, what am I supposed to do? Like, I guess I can. If event.target.value exists, then log this, but then it's like, okay, well, it's still saying that event target might be knows, maybe I should get rid of that.

[00:06:08]
But then it's like, well, event.target could be any, so you see that like type is kind of going like, I don't know what it's supposed to be. And so that's why typically, then you would just yeah, so we would just wrap this and then say as HTML input element, and now it's happy.

[00:06:29]
And so now we can take this whole thing and drop that here. And now that we have that we can go ahead new name.value, this is great. So once again, we can test this by going, if we don't hit the space at all and just say like, then website create.

[00:06:48]
Nothing's happened because it never got assigned me just delete that now or it can actually wipe that out. I do bend space you see that it got assigned up here test recommend create, now it's actually a sign. Assigning credit correctly. So, again hijacking events can be a little bit tricky but because you can typecast if you, again if you're telling types with what it's going to be, it is nice to because once, again it's easy to forget what you're putting things on.

[00:07:15]
So ultimately, it is a basically a way for you to document what your intentions are, how it's supposed to work. And then people can a lot more easily come into this update name, in case it's buggy in the future and go, okay, this is what I'm kind of looking at without even looking at the template.

[00:07:29]
They can already do a lot of work from that.