Eventos y manejo de acciones
Eventos y manejo de acciones
Section titled “Eventos y manejo de acciones”Usa la directiva x-on (o el atajo @) para escuchar y manejar eventos en Alpine.js.
Escuchando eventos con x-on y @
Section titled “Escuchando eventos con x-on y @”La directiva x-on permite escuchar cualquier evento del DOM, como click, input, keydown, etc. Puedes usar la sintaxis abreviada @ para mayor comodidad.
<button x-on:click="alert('¡Haz clic!')">Haz clic aquí</button><!-- Equivalente a: --><button @click="alert('¡Haz clic!')">Haz clic aquí</button>Modificadores de eventos
Section titled “Modificadores de eventos”Alpine.js soporta modificadores para controlar el comportamiento de los eventos:
- .prevent: Llama
event.preventDefault(). - .stop: Llama
event.stopPropagation(). - .once: El evento solo se ejecuta una vez.
- .self: Solo se ejecuta si el evento ocurre en el propio elemento.
<form @submit.prevent="enviar()"><button type="submit">Enviar</button></form><button @click.stop="accion()">No propagar</button>Eventos personalizados
Section titled “Eventos personalizados”Puedes emitir y escuchar eventos personalizados usando $dispatch y x-on:
<div x-data><button @click="$dispatch('saludo', { nombre: 'Ana' })">Saludar</button></div><div @saludo.window="alert('¡Hola ' + $event.detail.nombre + '!')"></div>Escuchar eventos globales
Section titled “Escuchar eventos globales”Agrega .window para escuchar eventos en window:
<div @resize.window="console.log('Ventana redimensionada')"></div>Ejemplo avanzado: teclas y combinación de teclas
Section titled “Ejemplo avanzado: teclas y combinación de teclas”Puedes escuchar eventos de teclado y combinaciones:
<input @keydown.enter="enviar()" placeholder="Presiona Enter" /><button @click.ctrl="accionCtrl()">Ctrl + Click</button>Delegación de eventos
Section titled “Delegación de eventos”La delegación de eventos permite manejar eventos de múltiples elementos hijos desde un solo listener en el elemento padre. Esto es útil para listas dinámicas:
<ul x-data @click="if($event.target.tagName === 'LI'){ alert($event.target.textContent) }"><li>Elemento 1</li><li>Elemento 2</li><li>Elemento 3</li></ul>Eventos en componentes anidados
Section titled “Eventos en componentes anidados”Puedes comunicarte entre componentes hijos y padres usando $dispatch y escuchando eventos personalizados:
<!-- Componente hijo --><div x-data><button @click="$dispatch('notificar', { mensaje: '¡Hola desde el hijo!' })">Notificar</button></div><!-- Componente padre --><div @notificar.window="alert($event.detail.mensaje)"></div>Acceso al objeto $event
Section titled “Acceso al objeto $event”El objeto $event contiene información sobre el evento disparado. Puedes acceder a propiedades como $event.target, $event.key, etc.:
<input @keydown="console.log($event.key)" placeholder="Presiona una tecla" />Eventos con parámetros dinámicos
Section titled “Eventos con parámetros dinámicos”Puedes pasar valores dinámicos a los handlers de eventos:
<button @click="seleccionar('A')">Seleccionar A</button><button @click="seleccionar('B')">Seleccionar B</button>Eventos asíncronos
Section titled “Eventos asíncronos”Puedes ejecutar funciones asíncronas en los handlers de eventos:
<button @click="await cargarDatos()">Cargar datos</button>Ejemplo completo: lista interactiva
Section titled “Ejemplo completo: lista interactiva”<ul x-data="{ items: ['Uno', 'Dos', 'Tres'], seleccionar(item) { alert(item) } }"><template x-for="item in items" :key="item"> <li @click="seleccionar(item)"> <span x-text="item"></span> </li></template></ul>Eventos en formularios y validación
Section titled “Eventos en formularios y validación”Puedes usar eventos para validar formularios en tiempo real o al enviar:
<form x-data="{ nombre: '', error: '' }" @submit.prevent="if(!nombre) error = 'El nombre es obligatorio'"><input x-model="nombre" placeholder="Nombre" /><span x-text="error" style="color: red"></span><button type="submit">Enviar</button></form>Eventos de foco y blur
Section titled “Eventos de foco y blur”Maneja el foco de los elementos para mejorar la experiencia de usuario:
<input @focus="console.log('Input enfocado')" @blur="console.log('Input perdió el foco')" placeholder="Prueba el foco" />Eventos de mouse avanzados
Section titled “Eventos de mouse avanzados”Puedes escuchar eventos como mouseenter, mouseleave, mousemove y más:
<div @mouseenter="console.log('Mouse sobre el div')" @mouseleave="console.log('Mouse fuera del div')">Pasa el mouse por aquí</div>Eventos de scroll y resize
Section titled “Eventos de scroll y resize”Escucha eventos globales para reaccionar a cambios en la ventana:
<div @scroll.window="console.log('Scroll detectado')"></div><div @resize.window="console.log('Ventana redimensionada')"></div>Eventos personalizados con detalles complejos
Section titled “Eventos personalizados con detalles complejos”Puedes enviar objetos complejos como detalle en $dispatch:
<div x-data><button @click="$dispatch('usuario', { id: 1, nombre: 'Ana', roles: ['admin', 'editor'] })">Enviar usuario</button></div><div @usuario.window="console.log($event.detail)"></div>Control de propagación y orden de eventos
Section titled “Control de propagación y orden de eventos”Puedes controlar el flujo de los eventos usando .stop, .prevent y .once para evitar comportamientos no deseados:
<div @click="console.log('Padre')"><button @click.stop="console.log('Hijo')">Hijo</button></div>