Creación y activación de eventos personalizados
Diseñe e implemente eventos personalizados mediante .trigger() y .on() para desacoplar componentes, crear código más limpio y permitir una comunicación flexible entre distintas partes de su aplicación.
Creación y activación de eventos personalizados es una lección gratuita de jQuery Academy en CoddyKit. Esta es la lección 3 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de jQuery Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de jQuery Academy incluye 3 lecciones en total.
Introducción a los eventos personalizados
¡Le damos la bienvenida! En esta lección aprenderá a crear y gestionar sus propios eventos personalizados en jQuery. Es una forma eficaz de hacer que su código esté más organizado y sea más flexible.
Imagine los eventos personalizados como mensajes especiales que distintas partes de su aplicación web pueden enviar y recibir. Esto les permite comunicarse sin estar vinculadas directamente.
¿Por qué usar eventos personalizados?
¿Por qué utilizar eventos personalizados? Ayudan a resolver un problema común: el acoplamiento fuerte. Cuando los componentes están estrechamente acoplados, cambiar una parte del código podría romper otra.
- Desacoplamiento: los componentes no necesitan conocer el funcionamiento interno de los demás.
- Código más limpio: la lógica relacionada con una acción específica se centraliza.
- Flexibilidad: puede añadir o eliminar listeners fácilmente sin modificar el «emisor».
El método .trigger()
Para «enviar» o «disparar» un evento personalizado, usamos el método .trigger() de jQuery. Se llama sobre un objeto jQuery, ya sea un elemento o document, y se pasa el nombre del evento como una cadena.
El nombre del evento puede ser cualquiera que elija, como 'dataLoaded' o 'itemAdded'.
Demostración de cómo disparar un evento
Veamos .trigger() en acción. Dispararemos un evento personalizado llamado 'myCustomEvent' en un botón cuando se haga clic en él. Todavía no ocurrirá nada, porque nadie está escuchando.
<!-- HTML assumed to be present -->
<button id="triggerButton">Trigger Event</button>
<script>
$(document).ready(function() {
$('#triggerButton').on('click', function() {
// Fire our custom event on the button itself
$(this).trigger('myCustomEvent');
console.log('myCustomEvent triggered!');
});
});
</script>Escuchar con .on()
Para «recibir» o «escuchar» un evento personalizado, usamos el conocido método .on(). Al igual que con los eventos integrados, como 'click', se especifica el nombre del evento y una función que se ejecutará cuando se dispare.
Puede escuchar en el mismo elemento que disparó el evento, en un elemento padre o incluso en el propio document para eventos globales.
Ejemplo de disparar y escuchar
Ahora, combinemos .trigger() y .on(). Haga clic en el botón y verá aparecer el mensaje, lo que demuestra que nuestro evento personalizado se disparó y se recibió correctamente.
<!-- HTML assumed to be present -->
<button id="myButton">Click Me</button>
<p id="statusMessage">Status: Waiting...</p>
<script>
$(document).ready(function() {
// 1. Listen for 'buttonClicked' on the button
$('#myButton').on('buttonClicked', function() {
$('#statusMessage').text('Status: Custom event received!');
});
// 2. When the button is clicked, trigger 'buttonClicked'
$('#myButton').on('click', function() {
$(this).trigger('buttonClicked');
});
});
</script>Pasar datos con los eventos
Los eventos personalizados son aún más útiles cuando permiten pasar datos junto con ellos. Puede enviar argumentos adicionales a .trigger() después del nombre del evento. Estos argumentos se pasarán a la función controladora del evento.
- El primer argumento del controlador siempre es el objeto de evento.
- Los argumentos posteriores son los datos que pasó con
.trigger().
Demostración de datos en eventos personalizados
Aquí disparamos un evento 'dataReady' y pasamos una cadena y un objeto. El listener recibe estos datos y los muestra. ¡Así es como los componentes comparten información!
<!-- HTML assumed to be present -->
<button id="loadData">Load Data</button>
<p id="output"></p>
<script>
$(document).ready(function() {
// Listen for 'dataReady' and extract the passed data
$(document).on('dataReady', function(event, message, details) {
const outputText = `Message: ${message}<br>Details: ${details.status} for ${details.item}`;
$('#output').html(outputText);
});
// When button clicked, trigger 'dataReady' with data
$('#loadData').on('click', function() {
const msg = 'Data successfully loaded!';
const data = { status: 'complete', item: 'report' };
$(document).trigger('dataReady', [msg, data]);
console.log('Data event triggered!');
});
});
</script>Desacoplamiento para mejorar las aplicaciones
Usar eventos personalizados para la comunicación ayuda a crear aplicaciones más modulares y fáciles de mantener. Imagine un componente de «carrito de compras» y otro de «vista de productos».
- Cuando se añade un producto, la «vista de productos» dispara
'productAdded'. - El componente «carrito de compras» escucha
'productAdded'y se actualiza.
Ninguno de los componentes necesita conocer los métodos internos del otro; solo necesitan conocer el contrato del evento.
Compruebe su comprensión
¿Cuáles de las siguientes afirmaciones describen correctamente las ventajas o el uso de los eventos personalizados con .trigger() y .on()?
Repaso: eventos personalizados
¡Excelente trabajo! Ha aprendido a crear y gestionar eventos personalizados en jQuery. Este es un breve resumen:
- Qué son: los eventos personalizados son mensajes definidos por el usuario para los componentes de una aplicación.
- Por qué usarlos: promueven el desacoplamiento, lo que da lugar a un código más limpio y flexible.
- Cómo usarlos: use
.trigger('eventName', [data])para disparar un evento. - Cómo usarlos: use
.on('eventName', function(event, data) { ... })para escuchar un evento.
¡Dominar los eventos personalizados es un paso fundamental para crear aplicaciones jQuery sólidas y escalables!
Preguntas frecuentes
¿La lección «Creación y activación de eventos personalizados» es gratis?
Sí — el texto completo de «Creación y activación de eventos personalizados» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de jQuery Academy, actualiza a CoddyKit PRO. El curso de jQuery Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Creación y activación de eventos personalizados»?
Diseñe e implemente eventos personalizados mediante .trigger() y .on() para desacoplar componentes, crear código más limpio y permitir una comunicación flexible entre distintas partes de su aplicació… Practicas jQuery Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar jQuery Academy?
No se requiere experiencia previa. jQuery Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 3.
¿Cuánto tiempo toma la lección «Creación y activación de eventos personalizados»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de jQuery Academy?
Sí. Cada lección de jQuery Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Implementación de delegación de eventos sólida
- Detención de la propagación de eventos
- Creación y activación de eventos personalizados