Vue Event Handling v on, Modifiers, defineEmits

Event Intent

Vue event listeners connect user actions to state transitions with v-on or @. Inline expressions suit one small assignment; named methods suit validation, branching, reuse, and testing. Event modifiers express DOM behavior such as prevent, stop, once, self, and keyboard constraints without burying it in handler code.

Listening to Events - v-on / @

Vue uses v-on (shorthand @) to listen to DOM events and run JavaScript when they fire. You can pass a method reference, an inline expression, or an arrow function.

Event Handling - Methods, Modifiers, Custom Events

<template>
  <div>
    <!-- Method reference -->
    <button @click="handleClick">Click me</button>

    <!-- Inline expression -->
    <button @click="count++">Count: {{ count }}</button>

    <!-- Arrow function - access event object -->
    <button @click="(e) => handleWithEvent(e, 'hello')">With args</button>

    <!-- $event - pass event in inline handler -->
    <input @input="handleInput($event)">

    <!-- Multiple events -->
    <input
      @focus="isFocused = true"
      @blur="isFocused = false"
      @keyup.enter="submit"
    >

    <!-- Mouse events -->
    <div
      @mouseenter="isHovered = true"
      @mouseleave="isHovered = false"
      :class="{ hovered: isHovered }"
    >
      Hover me
    </div>

    <p>Count: {{ count }}, Focused: {{ isFocused }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
const isFocused = ref(false)
const isHovered = ref(false)

function handleClick() {
  alert('Button clicked!')
}

function handleWithEvent(event, message) {
  console.log(message, event.target)
}

function handleInput(event) {
  console.log('Input value:', event.target.value)
}

function submit() {
  console.log('Form submitted via Enter key')
}
</script>

Listening to Events - v-on / @ - HTML Example

<template>
  <div>
    <!-- Event modifiers -->

    <!-- .prevent - calls event.preventDefault() -->
    <form @submit.prevent="handleSubmit">
      <button type="submit">Submit (no page reload)</button>
    </form>

    <!-- .stop - calls event.stopPropagation() -->
    <div @click="outerClick">
      Outer
      <button @click.stop="innerClick">Inner (stops bubbling)</button>
    </div>

    <!-- .once - fires only once -->
    <button @click.once="fireOnce">Click once only</button>

    <!-- .self - only fires if target is the element itself -->
    <div @click.self="selfOnly" class="box">
      Click the box (not children)
      <span>I'm a child</span>
    </div>

    <!-- .passive - improves scroll performance -->
    <div @scroll.passive="handleScroll">...</div>

    <!-- Key modifiers -->
    <input @keyup.enter="onEnter" placeholder="Press Enter" />
    <input @keyup.esc="onEscape" placeholder="Press Escape" />
    <input @keyup.space="onSpace" placeholder="Press Space" />
    <input @keydown.ctrl.s.prevent="save" placeholder="Ctrl+S to save" />
    <input @keydown.shift.enter="newLine" placeholder="Shift+Enter" />

    <!-- Mouse button modifiers -->
    <button @click.left="leftClick">Left click</button>
    <button @click.right.prevent="rightClick">Right click</button>
    <button @click.middle="middleClick">Middle click</button>

    <!-- Chaining modifiers -->
    <a href="#" @click.prevent.stop="handleLink">Link</a>
  </div>
</template>

<script setup>
function handleSubmit() { console.log('Submitted!') }
function outerClick()   { console.log('Outer clicked') }
function innerClick()   { console.log('Inner clicked') }
function fireOnce()     { console.log('Fired once!') }
function selfOnly()     { console.log('Self clicked') }
function handleScroll() { /* passive scroll handler */ }
function onEnter()      { console.log('Enter pressed') }
function onEscape()     { console.log('Escape pressed') }
function onSpace()      { console.log('Space pressed') }
function save()         { console.log('Ctrl+S - Save!') }
function newLine()      { console.log('Shift+Enter') }
function leftClick()    { console.log('Left click') }
function rightClick()   { console.log('Right click') }
function middleClick()  { console.log('Middle click') }
function handleLink()   { console.log('Link clicked') }
</script>

Listening to Events - v-on / @ - HTML Example 2

<!-- Child component: MyButton.vue -->
<template>
  <button @click="handleClick" :disabled="loading">
    <slot>{{ label }}</slot>
  </button>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  label: { type: String, default: 'Click' }
})

// Declare emitted events
const emit = defineEmits({
  // With validation
  click: (payload) => {
    return typeof payload === 'object'
  },
  // Simple declaration
  'update:loading': Boolean,
  success: null,
  error: String,
})

const loading = ref(false)

async function handleClick() {
  loading.value = true
  emit('update:loading', true)

  try {
    // Simulate async work
    await new Promise(r => setTimeout(r, 1000))
    emit('click', { timestamp: Date.now(), source: 'button' })
    emit('success')
  } catch (err) {
    emit('error', err.message)
  } finally {
    loading.value = false
    emit('update:loading', false)
  }
}
</script>

<!-- Parent component -->
<template>
  <div>
    <MyButton
      label="Save"
      @click="onButtonClick"
      @success="onSuccess"
      @error="onError"
    />
    <p>{{ status }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import MyButton from './MyButton.vue'

const status = ref('Ready')

function onButtonClick(payload) {
  console.log('Clicked at:', payload.timestamp)
  status.value = 'Processing...'
}
function onSuccess() { status.value = 'Saved!' }
function onError(msg) { status.value = `Error: ${msg}` }
</script>

Accessible Interaction

Use semantic controls first. A button already supports keyboard activation and focus, while a clickable div requires extra roles and keyboard behavior. Do not attach .prevent to links or forms unless the application supplies a complete navigation or submission path. Modifier order matters because generated code follows the written order.

Pass application data explicitly instead of depending on event.target deep inside a component tree. For rapid actions, prevent duplicate in-flight writes at the state/action boundary. Debounce continuous input only when delayed feedback is acceptable, and always keep the final value.

Before you move on