LuisLlamas Logo
ES
vuejs-eventos-del-dom

Cómo usar eventos del DOM en Vue.js

  • 3 min
  • Iniciación

En Vue.js, podemos capturar los eventos emitidos por elementos del DOM (como botones o inputs) para desarrollar aplicaciones interactivas.

Los eventos del DOM son un suceso que ocurre en el navegador, como clics, entradas de teclado, movimientos del mouse, etc.

Vue.js puede escuchar a estos eventos del DOM y ejecutar código en respuesta dentro de su sistema de componentes.

En Vue.js, los componentes pueden emitir eventos personalizados para comunicarse con sus componentes padres mediante la función emit. Lo veremos en su propia entrada.

Sintaxis básica de los eventos en Vue.js

En Vue.js, los eventos se manejan utilizando la directiva v-ono su abreviatura @. La sintaxis básica es la siguiente:

<!-- formua abreviada, que usaréis normalmente -->
<button @click="manejarClic">Haz clic</button>

<!-- es lo mismo que esto -->
<button v-on:click="manejarClic">Haz clic</button>

Aquí asociaremos la funcion que queremos que se ejecute cuando ocurra el evento (llamada event handler). Vamos a verlo con un ejemplo.

<template>
  <button @click="manejarClic">Haz clic</button>
</template>

<script setup>
function manejarClic() {
  alert('¡Botón clickeado!');
}
</script>

En este ejemplo,

  • El evento click está vinculado al botón.
  • Cuando el usuario hace clic en el botón, se ejecuta la función manejarClic.

Pasar argumentos a los gestores de eventos

A veces, es útil pasar argumentos adicionales a los gestores de eventos. Esto se puede hacer directamente en la plantilla.

<template>
  <button @click="manejarClicConArgumento('Hola')">Haz clic</button>
</template>

<script setup>
function manejarClicConArgumento(mensaje) {
  console.log(mensaje);
}
</script>

En este ejemplo, el mensaje 'Hola' se pasa como argumento a la función manejarClicConArgumento.

Tipos de eventos comunes

Vue.js soporta todos los eventos nativos del DOM, como click, input, change, mouseover, keydown, entre otros.

Vamos a ver cómo se pueden usar algunos de los más utilizados.

El evento click se dispara cuando el usuario hace clic en un elemento.

<template>
  <button @click="manejarClic">Haz clic</button>
</template>

<script setup>
function manejarClic() {
  console.log('¡Botón clickeado!');
}
</script>

El evento input se dispara cuando el usuario escribe en un campo de texto.

<template>
  <input @input="manejarInput" placeholder="Escribe algo" />
</template>

<script setup>
function manejarInput(event) {
  console.log('Texto ingresado:', event.target.value);
}
</script>

En este ejemplo, event.target.value contiene el valor actual del campo de texto.

El evento change se dispara cuando el valor de un elemento cambia y pierde el foco (por ejemplo, al seleccionar una opción en un <select>).

<template>
  <select @change="manejarCambio">
    <option value="1">Opción 1</option>
    <option value="2">Opción 2</option>
    <option value="3">Opción 3</option>
  </select>
</template>

<script setup>
function manejarCambio(event) {
  console.log('Opción seleccionada:', event.target.value);
}
</script>

El evento keydown se dispara cuando el usuario presiona una tecla.

<template>
  <input @keydown="manejarTecla" placeholder="Presiona una tecla" />
</template>

<script setup>
function manejarTecla(event) {
  console.log('Tecla presionada:', event.key);
}
</script>

En este ejemplo, event.key contiene la tecla que el usuario presionó.

Modificadores de eventos

Vue.js proporciona modificadores de eventos que nos permiten modificar el comportamiento de los eventos de manera declarativa. Algunos de los modificadores más comunes son:

Detiene la propagación del evento (equivalente a event.stopPropagation()).

<template>
  <div @click="manejarClicPadre">
    <button @click.stop="manejarClicHijo">Haz clic</button>
  </div>
</template>

<script setup>
function manejarClicPadre() {
  console.log('Clic en el padre');
}

function manejarClicHijo() {
  console.log('Clic en el hijo');
}
</script>

En este ejemplo, el evento click en el botón no se propagará al contenedor padre.

Previene el comportamiento por defecto del evento (equivalente a event.preventDefault()).

<template>
  <form @submit.prevent="manejarSubmit">
    <button type="submit">Enviar</button>
  </form>
</template>

<script setup>
function manejarSubmit() {
  console.log('Formulario enviado');
}
</script>

En este ejemplo, el formulario no se enviará de manera tradicional, sino que se ejecutará la función manejarSubmit.

Ejecuta el manejador de eventos solo una vez.

<template>
  <button @click.once="manejarClicUnaVez">Haz clic</button>
</template>

<script setup>
function manejarClicUnaVez() {
  console.log('¡Solo una vez!');
}
</script>

En este ejemplo, el manejador de eventos solo se ejecutará la primera vez que se haga clic en el botón.

En esta página