# Vue.js Event Handling
Event listening can be done using the `v-on` directive:
## v-on
This button was clicked {{ counter }} times.
new Vue({ el: '#app', data: { counter: 0 } })
[Try it »](#)
Usually, we need to use a method to call a JavaScript method.
`v-on` can receive a defined method to call.
## v-on
var app = new Vue({ el: '#app', data: { name: 'Vue.js' }, // Define methods within the `methods` object methods: { greet: function (event) { // `this` refers to the current Vue instance inside the method alert('Hello ' + this.name + '!') // `event` is the native DOM event if (event) { alert(event.target.tagName) } } } }) // You can also call the method directly using JavaScript app.greet() // -> 'Hello Vue.js!'
[Try it »](#)
Besides directly binding to a method, you can also use inline JavaScript statements:
## v-on
new Vue({ el: '#app', methods: { say: function (message) { alert(message) } } })
[Try it »](#)
### Event Modifiers
Vue.js provides event modifiers for `v-on` to handle DOM event details, such as `event.preventDefault()` or `event.stopPropagation()`.
Vue.js invokes modifiers via directive suffixes represented by a dot `.`.
* `.stop` - Stop propagation
* `.prevent` - Prevent default event
* `.capture` - Capture mode
* `.self` - Only trigger if event target is the element itself
* `.once` - Trigger only once
* `.left` - Left mouse button event
* `.right` - Right mouse button event
* `.middle` - Middle mouse button event
...
...
### Key Modifiers
Vue allows adding key modifiers to `v-on` when listening for keyboard events:
Remembering all keyCodes is difficult, so Vue provides aliases for the most commonly used keys:
All key aliases:
* `.enter`
* `.tab`
* `.delete` (Captures both "Delete" and "Backspace" keys)
* `.esc`
* `.space`
* `.up`
* `.down`
* `.left`
* `.right`
* `.ctrl`
* `.alt`
* `.shift`
* `.meta`
Example
YouTip