Vue Event Handler

Posted on  by admin

We can use the v-on directive to listen to DOM events:. We are binding a click event listener to a method named greet.

Here’s how to define that method in our Vue instance:. Test it yourself:. Instead of binding directly to a method name, we can also use an inline JavaScript statement:. Similar to the restrictions on inline expressions, event handlers are restricted to one statement only.

Wrapping Up

Sometimes we also need to access the original DOM event in an inline statement handler. You can pass it into a method using the special $event variable:.

# Mouse Button Modifiers

It is a very common need to call event.preventDefault() or event.stopPropagation() inside event handlers.

Listening to Events

Although we can do this easily inside methods, it would be better if the methods can be purely about data logic rather than having to deal with DOM event details.

To address this problem, Vue.js provides two event modifiers for v-on: .prevent and .stop.

Recall that modifiers are directive postfixes denoted by a dot:. In 1.0.16, two additional modifiers have been introduced:.

When listening for keyboard events, we often need to check for common key codes.

Vue.js also allows adding key modifiers for v-on when listening for key events:.

.exact Modifier

Remembering all the keyCodes is a hassle, so Vue.js provides aliases for most commonly used keys:. Here’s the full list of key modifier aliases:.

The second argument for the setup method is the context variable which contains three properties: attrs, slots, and most importantly for us, emit.

delete (captures both “Delete” and, if the keyboard has it, “Backspace”). 1.0.8+: Single letter key aliases are also supported.

Prevent default behavior

1.0.17+: You can also define custom key modifier aliases:. You might be concerned that this whole event listening approach violates the good old rules about “separation of concern”.

#.exact Modifier

Rest assured - since all Vue.js handler functions and expressions are strictly bound to the ViewModel that’s handling the current View, it won’t cause any maintenance difficulty.

In fact, there are several benefits in using v-on:. It makes it easier to locate the handler function implementations within your JS code by simply skimming the HTML template.

Call elements on v-on

Since you don’t have to manually attach event listeners in JS, your ViewModel code can be pure logic and DOM-free.

This makes it easier to test. When a ViewModel is destroyed, all event listeners are automatically removed.

Key event modifiers

You don’t need to worry about cleaning it up yourself. ← List RenderingForm Input Bindings →. Caught a mistake or want to contribute to the documentation?Edit this page on Github!

Additional event modifiers

# Event Modifiers

You’re browsing the documentation for v2.x and earlier. For v3.x, click here. We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered.

The button above has been clicked {{ counter }} times. The logic for many event handlers will be more complex though, so keeping your JavaScript in the value of the v-on attribute isn’t feasible. That’s why v-on can also accept the name of a method you’d like to call.

# Listening to Events

Instead of binding directly to a method name, we can also use methods in an inline JavaScript statement:.

Sometimes we also need to access the original DOM event in an inline statement handler.

  • You can pass it into a method using the special $event variable:. It is a very common need to call event.preventDefault() or event.stopPropagation() inside event handlers. Although we can do this easily inside methods, it would be better if the methods can be purely about data logic rather than having to deal with DOM event details.

Method Event Handlers

To address this problem, Vue provides event modifiers for v-on. Recall that modifiers are directive postfixes denoted by a dot.

Order matters when using modifiers because the relevant code is generated in the same order.

  • shift

  • alt

  • ctrl

  • Therefore using v-on:click.prevent.self will prevent all clicks while v-on:click.self.prevent will only prevent clicks on the element itself.

Unlike the other modifiers, which are exclusive to native DOM events, the .once modifier can also be used on component events.

If you haven’t read about components yet, don’t worry about this for now. Vue also offers the .passive modifier, corresponding to addEventListener‘s passive option.

# System Modifier Keys

The .passive modifier is especially useful for improving performance on mobile devices. Don’t use .passive and .prevent together, because .prevent will be ignored and your browser will probably show you a warning.

Experience your Vue apps exactly how a user does

Remember, .passive communicates to the browser that you don’t want to prevent the event’s default behavior.

When listening for keyboard events, we often need to check for specific keys. Vue allows adding key modifiers for v-on when listening for key events:.

You can directly use any valid key names exposed via KeyboardEvent.key as modifiers by converting them to kebab-case.