Vue Event Modifiers

Posted on  by admin

In last tutorial, we have learned event handling in vuejs; In thisthe tutorial we are going to learn about event modifiers and key modifiers in Vue.js.

Key Modifiers

Event Modifiers in Vuejs helps us to modify the default behavior of the dom events. Let’s see some examples.

In the above code we have added a .prevent modifer to the submit event so that we have stopped thedefault reloading behavior.

Available Event Modifiers.

.stop modifier is used to stop the propagation of the event to its parent.

Mouse Button Modifiers

.once modifier only trigger the event once. Here we added a .once modifer to the click event so that the click event only triggers the handleClickmethod one time. .self modifier only trigger the event when we click on itself.

In above code we have added a .self modifier to the click event so that the alert method only invokes when we click on the div tag.

It doesn’t pass the event down to its child elements.

.exact Modifier

In Vue.js key modifiers helps us to listen the key events. Here we added a .enter key modifer to the keyup Keyboard event so that it triggers the login method when a enter key goes up.

Other available mouse modifiers.

Directive modifiers are special postfixes that are denoted by a dot, indicating that a directive should be bound in some special way. The modifiers that are related to events are referred to as event modifiers.

Event Modifiers

Yeah, I know what you are probably thinking. That sounds fancy and all, but what does it actually mean? While modifiers are not limited to events, let’s take a look at event modifiers, as these are easy to grasp. So right now I have a div element with a nested button (see JSFiddle at the bottom), both having a click event handler which simply invokes a method that shows an alert.

If I click the button and close the first alert, notice that a second alert is shown. This is because the click event for the button element propagates up the DOM and thereby triggers the click event on the div element as well.

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive

This wouldn’t matter if we didn’t have an event handler on the div element, but in this case we do. We can disable this default behavior by using an event modifier that corresponds to calling event.stopPropagation() in JavaScript.

We could actually do this too, but embedding that kind of DOM logic into our methods is probably not the best way to go.

Instead, we can use the stop event modifier, which does exactly that, so let’s see it in action. Notice the syntax; I simply added a dot followed by the name of the modifier, after the name of the event.

If we try again, we’ll see that only one alert is shown this time, which is the one triggered by the click event on the button.

Because of our modifier, event propagation is stopped from here, and thus the click event on the div element is ignored. I will just remove the div element before moving onto the next example.

For whatever reason, we might want to trigger an event only once. This can be accomplished with the once modifier.

If I replace the stop modifier with the once modifier, we should see that the alert is only displayed once. What if we add an event listener to an event, but we don’t want the browser to perform the default action? Perhaps we don’t want to submit a form when clicking a submit button, or maybe we don’t want the browser to navigate to a URL within the href property of a link.

Key Codes

Let’s take the latter example and see how we can accomplish that. So if I add a link that points to and add the same click event handler as before, we will see that the browser first shows the alert, and then navigates to the link’s URL.

Let’s check and verify that what I just said is true… And indeed it is. Note that the reason I added a target of _blank to the link, is for the link to work with JSFiddle, so it has nothing to do with Vue.js.

If I want to prevent the browser from opening the URL, I can use the prevent modifier. This is the same as calling event.preventDefault() in JavaScript.

Not the answer you're looking for? Browse other questions tagged vue.jsvuejs2 or ask your own question.

Now we will still see the alert, but the browser will no longer send us off to Google.

If we just wanted to prevent the default browser action from occurring, when clicking the button, we could actually completely leave out the v-on directive’s expression.

The only thing this does, is the equivalent of calling event.preventDefault(). So if you use some event modifier meaning that you don’t need the expression, then you can simply leave it out.

  • .enter
  • .tab
  • Before ending this post, I just want to mention that modifiers can be chained, by simply separating the modifiers with dots.
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

I will get back to that in the next post, though. There are other modifiers too, but these are the ones we need for now. I will include a link to an overview of event modifiers in a few posts, but for now, let’s move onto talking about something called key modifiers.

Here is what you will learn:. How to build advanced Vue.js applications (including SPA).

System Modifier Keys

How Vue.js works under the hood.

Communicating with services through HTTP. Managing state of large applications with Vuex. Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

  • .ctrl
  • .alt
  • .shift
  • .meta

In this article, we’ll look at how to handle various events with Vue.js and modify an event handler’s behavior. When listening to keyboard events, we often want to check for specific keys. To do this, we can add the key name as the modifier of the v-on directive. For example, we can use it as follows:. The code above will watch for presses for the enter key when the input if focused.

Then when we press Enter and release the key at that time, we’ll get whatever’s typed into the input displayed in the alert box.

v-on:keyup.enter=”submit” only checks for when the Enter key is released. For key names that are more than one word, we convert it to kebab case. For example, if we want to listen to the keyup event of the page up key, we write:. Then when the page up key is released, onPageUp is called. We can also pass the key code as the modifier of v-on . For example, if we want to listen to the event when the Enter key is released after it’s pressed, we can write the following:.

.exact Modifier

However, the use ofkeyCode events are deprecated so it may not be supported in new browsers.

Aliases for commonly used key codes are included in Vue. .delete (captures both “Delete” and “Backspace” keys).

Mouse Button Modifiers

Some keys, like arrow keys and .esc have inconsistent values in IE9, so these built-in aliases should be preferred if our app supported IE9.

  • .left
  • .right
  • .middle

We can also define our own key code aliases as follows:. Then we can use:.

Why Listeners in HTML?

Since Vue 2.1.0 or later, we can use modifier keys to trigger mouse or keyboard event listeners only when the corresponding modifier keys are pressed:. The meta key is the command key on Macintosh keyboards. On Windows keyboards, the meta key is the windows key. On Sun workstation keyboards, it’s solid diamond key.

  1. For example, if we want Alt-S to be the shortcut key to display an alert with what we typed, we can write the following:.

  2. If we want an alert to pop up when we Ctrl-click on a button, we can write the following:. Then we get an alert with the word ‘hi’ when we Ctrl-click on the Say Hi button.

  3. The modifier keys have to pressed when the event is emitted in both cases. So in the examples above, Alt or Ctrl have to press in addition to what comes after it.

Since Vue 2.5.0, we can use the .exact modifier to control the exact combination of system modifiers needed to trigger an event.