Overview

Events are actions produced by users or the browser, such as clicking, typing, submitting a form, or pressing a key. Vue listens with v-on—or its @ shorthand—and runs component logic without requiring manual event-listener setup for template elements.

Key concepts

• v-on and @ attach event listeners
• Methods keep event logic organized
• $event exposes the native browser event
• Modifiers express common behavior directly in templates

What are Events?

An event reports that something happened in the browser. Common examples include clicks, input, value changes, form submissions, mouse movement, and keyboard actions.

• Clicking a button
• Typing in a field
• Selecting an option
• Submitting a form
• Moving or leaving the pointer
• Pressing or releasing a key

Why do we need Event Handling?

An online store needs to react when a shopper adds an item, changes its quantity, or submits checkout information. Event handling connects those user actions to application state and business logic.

The v-on Directive

v-on listens for a named event and evaluates an inline expression or calls a method.

<template>
  <button v-on:click="showMessage">
    Click Me
  </button>
</template>

<script>
export default {
  methods: {
    showMessage() {
      alert("Button clicked!");
    }
  }
};
</script>

Short Syntax

The @ symbol is shorthand for v-on:. Both listeners below are equivalent.

<button v-on:click="showMessage">Click Me</button>
<button @click="showMessage">Click Me</button>

Inline handlers vs Methods

Short state updates can be written inline. Use a named method when the handler contains multiple steps, validation, reuse, or business logic.

<script setup>
import { ref } from "vue";

const count = ref(0);
function resetCount() {
  count.value = 0;
}
</script>

<template>
  <button @click="count++">Count: {{ count }}</button>
  <button @click="resetCount">Reset</button>
</template>

Passing Arguments

Call a handler with arguments when the same method should process different values or records.

<template>
  <button @click="greet('John')">Say Hello</button>
</template>

<script>
export default {
  methods: {
    greet(name) {
      alert("Hello " + name);
    }
  }
};
</script>

The Event Object

A method used directly as a handler receives the native event object. When also passing custom arguments, use Vue's $event variable.

<button @click="showEvent">Inspect event</button>
<button @click="selectProduct(product.id, $event)">Select</button>

The event object exposes the event type, target element, keyboard key, pointer coordinates, and other browser-specific details.

Common Vue Events

Event Modifiers

Modifiers keep common DOM event details out of handler methods.

Prevent default behavior

<form @submit.prevent="saveData">
  <button>Save</button>
</form>

Stop event propagation

<button @click.stop="showMessage">Click</button>

Run only once

<button @click.once="showMessage">Click Once</button>

Other useful modifiers

• .self runs only when the element itself is the target
• .capture registers a capture-phase listener
• .passive indicates that a listener will not prevent default scrolling
• .left, .right, and .middle filter pointer buttons

Keyboard Events

Key modifiers make keyboard intent visible in the template.

<input @keyup.enter="login">
<input @keydown.esc="closeDialog">

Common key modifiers include .enter, .esc, .tab, .space, and .delete. System modifiers such as .ctrl, .alt, .shift, and .meta can be combined when appropriate.

Real-life example

A login screen reacts to input events as credentials are entered and to submit when the user signs in. A store listens for clicks to add products, remove wishlist items, and change quantities.

Common beginner mistakes

• Calling a method during render when only a reference is needed
• Forgetting .prevent on a client-handled form
• Putting complex logic directly in the template
• Using the event object without accepting it or passing $event
• Adding unnecessary manual DOM listeners
• Forgetting to clean up listeners added directly to window or document

Best practices

• Use the @ shorthand consistently
• Choose meaningful handler names
• Keep substantial logic in methods or functions
• Use modifiers for standard DOM behavior
• Pass IDs instead of entire DOM elements when possible
• Keep handlers accessible to keyboard users
• Clean up global listeners during component unmount

Key takeaways

• Events represent user and browser actions
• v-on or @ attaches listeners
• Handlers can be inline or named
• Arguments make methods reusable
• $event provides the native event
• .prevent, .stop, and .once simplify common behavior
• Key modifiers filter keyboard events
• Clear event handling is essential for interactive Vue applications