Managing events in Vue [7 of 16] | Beginner's Series to: Vue.js

>> Hi. I'm Chris Noring and welcome to this video on view and events. In this video, we'll talk about various aspects when it comes to events. We'll talk about there being many different types of events. We'll also look on Event Handlers code that runs because an event happened. We'll also look at something called Event Modifiers, and those are really, really interesting. It enables you to control the process of how events would be handled. Lastly, we'll look at how to type less in the sense tha

t we will show a shorthand so instead of using the construct that you would normally use to wire up events, you'd instead use this shorter version. But first, let's dive into various events. Many things can generate events. It could be a custom event, it could be a button click event, it could be a key up or a key pressed, and so on, or it could be your scroll bar, for example. A lot of events can be generated and we can capture all of those events, but we have to start somewhere. So we're going

to start with something simple which is a button and a button click. Those are the most likely events that's going to happen anyway. If you look here in our markup, we see that we have a button and we want to capture any click from that button because it might be used to submit a form, or do some save, or something. We are interested in the button, we are interested in knowing when that click happens. What we use is something called v-on. Now, by using this directive called v-on, we need to spe

cify what type of event. We need to specify whether it's a key up, or a click, or whatever event that we want to capture. We add a colon and then we add the type of event which in this case is a click. Now, once we have established what event we want to capture, we need to say, "Hey, this method here in the code should capture this event." Specify something called handleClick. Once we specify handleClick, we need to go into our code and ensure that handleClick exists. What we need is a method wi

thin the methods property and in this case, we just add handleClick. On top of that, we want to capture the event itself in case we want to investigate things around the element that actually caused the event. We do that. We don't do much with the event, but in another case, if we want to, but just know if you want to capture the original event that generated this, this is how you would pass it. What we're doing inside of here is to increment this coins variable. Imagine that you are playing Sup

er Mario for example, it would make sense if you were to capture some coin so you would want that coin to be incremented. Let's have a look at this in our browser and see how that works. We have set up this handler and we had it point to the click event and we used the v-on to get there. Before we go as far as going towards browser, we want to make sure that we do nothing but handling the click. Now, let's head our browser. Every time we hit this button, we see how the handleClick method is bein

g invoked, and what it does is to update the coin. We see that coin here it goes from 0-1. You can click it again just to make sure it still works, and that's all great. But let's head back to our code because we want to talk about something more complex, how events work in JavaScript. The nature of an event is to bubble, and that means it starts from an inner element, like this button, and it goes towards an outer element and to an outer element, and so on. This behavior of the event just going

up, up is called bubbling. Now we can stop that behavior or we don't have to deal with it at all. For example, if we only have an handler here that handles this button click event, nothing much happens. But we can actually have an outer element handle this click too. Now, I'm going to show you the bubbling nature that is event actually keeps ongoing. We add another v-on click but this time we point to outerClick. Now if you will click this, we see that the event first start to handle handleClic

k with just a click on our button, and then we see how this event keeps ongoing. It actually keeps on going up, which is the bubbling. We see how this outerClick is being invoked because now the parent element that the button was residing in or div is also able to handle this. Now in some business application, for example, this could be a nice little feature. You could be using that for some kind of logging, or you could use that to do some other part of business logic that the inner event didn'

t handle. Now in our code, we can add something called modifiers. What that means is that we can go into this event, for example, and say, "Stop". When we do stop that means that it will stop there. It won't bubble. It won't actually go to its parent. Just by us adding this.stop, let's go to our browser and you see how that works. We invoke handleClick but we see it doesn't really reach outerClick this time around, and this is because we stopped it. We stopped the whole bubbling. There is also a

nother thing we can do, which is called once. When we do once, this means that the event handler will only react once, so we could have these one-offs. Sometimes we want the button to work every single time we click it, sometimes we only want it to work on the first time we interact with it. Let's demo that as well. First time I click it, it works and we see the outerClick working as well. Next time I click it, we see that handleClick is no longer reacting because it had a once on it whereas the

outerClick was good to handle it each and every time, so we see how that stop would work. Now if we were to add this capture command and then stop, we would actually completely reverse in what order things would be handled. By saying capture, what we're saying is, let the outermost element handle this first. What we are saying is that the outerClick will actually handle the event first and then handleClick would handle it. But we are also adding this functionality stop on top of it, which means

that it will actually never reach the inner element if we put that. If you remove this, it would go from parent to child but if we add the stop to it as well, we will never reach the child. This is a very fine-grain control and as you can also see if we want to have many of these modifiers we just have to do a dot and then the name of the modified.capture,.stop, and so on. Let's try to demo the functionality for this one too. Now, we see how the outerClick is reacting first and we see that the

handleClick never get there. The reason why handleClick never gets there is because we are using this capture modifier and we're using this stop, and the stop is what makes it stop at the parent level. The shorthand is really us not having to type everything. Right now, you see how I have to type v-on:click. I could just get rid of v-on and type. Now, let's have a look at this shorthand. What I've already done is to replace the v-on and I've done so already. You're seeing I'm getting rid of the

v-on: and just replace all of that with an @ sign. I can do the same here. I can just do @, and it would mean the same. If you wanted to save a few keystrokes definitely do that. Let's make sure this still works. We see that our handler is being called and the handleClick is not being called because of this prevent stop behavior. But all in all, I hope this was a useful video for you to see what kind of events you could have, how you would handle events, and how you can modify the behavior of ev

ents. If you didn't know about this bubbling behavior before, you do now. Thanks all. [MUSIC]