LuisLlamas Logo
EN
vuejs-eventos-del-dom

How to Use DOM Events in Vue.js

  • 3 min
  • Beginner

In Vue.js, we can capture events emitted by DOM elements (like buttons or inputs) to develop interactive applications.

DOM events are a happening that occurs in the browser, such as clicks, keyboard entries, mouse movements, etc.

Vue.js can listen to these DOM events and execute code in response within its component system.

In Vue.js, components can emit custom events to communicate with their parent components using the emit function. We will see this in its own entry.

Basic Syntax of Events in Vue.js

In Vue.js, events are handled using the v-on directive or its shorthand @. The basic syntax is as follows:

<!-- abbreviated formula, which you will usually use -->
<button @click="handleClick">Click me</button>

<!-- this is the same as this -->
<button v-on:click="handleClick">Click me</button>

Here, we will associate the function we want to be executed when the event occurs (called event handler). Let’s see it with an example.

<template>
  <button @click="handleClick">Click me</button>
</template>

<script setup>
function handleClick() {
  alert('Button clicked!');
}
</script>

In this example,

  • The click event is bound to the button.
  • When the user clicks the button, the handleClick function is executed.

Passing Arguments to Event Handlers

Sometimes, it is useful to pass additional arguments to event handlers. This can be done directly in the template.

<template>
  <button @click="handleClickWithArgument('Hello')">Click me</button>
</template>

<script setup>
function handleClickWithArgument(message) {
  console.log(message);
}
</script>

In this example, the message 'Hello' is passed as an argument to the handleClickWithArgument function.

Common Event Types

Vue.js supports all native DOM events, such as click, input, change, mouseover, keydown, among others.

Let’s see how some of the most commonly used can be applied.

The click event is triggered when the user clicks on an element.

<template>
  <button @click="handleClick">Click me</button>
</template>

<script setup>
function handleClick() {
  console.log('Button clicked!');
}
</script>

The input event is triggered when the user types in a text field.

<template>
  <input @input="handleInput" placeholder="Type something" />
</template>

<script setup>
function handleInput(event) {
  console.log('Text entered:', event.target.value);
}
</script>

In this example, event.target.value contains the current value of the text field.

The change event is triggered when the value of an element changes and loses focus (for example, when selecting an option in a <select>).

<template>
  <select @change="handleChange">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</template>

<script setup>
function handleChange(event) {
  console.log('Selected option:', event.target.value);
}
</script>

The keydown event is triggered when the user presses a key.

<template>
  <input @keydown="handleKey" placeholder="Press a key" />
</template>

<script setup>
function handleKey(event) {
  console.log('Key pressed:', event.key);
}
</script>

In this example, event.key contains the key that the user pressed.

Event Modifiers

Vue.js provides event modifiers that allow us to modify the behavior of events declaratively. Some of the most common modifiers are:

Stops the propagation of the event (equivalent to event.stopPropagation()).

<template>
  <div @click="handleParentClick">
    <button @click.stop="handleChildClick">Click me</button>
  </div>
</template>

<script setup>
function handleParentClick() {
  console.log('Click on the parent');
}

function handleChildClick() {
  console.log('Click on the child');
}
</script>

In this example, the click event on the button will not propagate to the parent container.

Prevents the default behavior of the event (equivalent to event.preventDefault()).

<template>
  <form @submit.prevent="handleSubmit">
    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
function handleSubmit() {
  console.log('Form submitted');
}
</script>

In this example, the form will not be submitted in the traditional way, but the handleSubmit function will be executed.

Executes the event handler only once.

<template>
  <button @click.once="handleClickOnce">Click me</button>
</template>

<script setup>
function handleClickOnce() {
  console.log('Only once!');
}
</script>

In this example, the event handler will only be executed the first time the button is clicked.

On this page