8.1 Creación de eventos personalizados
Eventos personalizados (o eventos de usuario) en JavaScript permiten a los desarrolladores crear y despachar sus propios eventos, lo cual puede ser útil para transmitir información e interactuar entre distintas partes de una aplicación. Crear y usar eventos personalizados puede mejorar la estructura y flexibilidad de tu código, proveyendo un modo de notificación y gestión del estado de la aplicación.
Para crear eventos personalizados se usa el constructor CustomEvent. Este constructor permite la creación de nuevos eventos con parámetros ajustables y datos adicionales.
Sintaxis:
const event = new CustomEvent(type, {detail: additionalData});
Donde:
type: cadena que representa el nombre del eventodetail: objeto que contiene datos adicionales que serán transmitidos junto con el evento
Ejemplo de creación de un evento personalizado:
const myEvent = new CustomEvent('myCustomEvent', { detail: { message: '¡Hola, mundo!' } });
8.2 Despachar eventos personalizados
Despachar un evento se realiza con el método dispatchEvent. Este método se llama en el elemento
en el que el evento debe ocurrir.
Explicación:
- Se agrega un manejador de eventos
myCustomEvental botónmyButton, que muestra en consola un mensaje de los datos del evento - Se crea un evento personalizado
myCustomEventcon un mensaje endetail - El evento se despacha en el botón
myButton, llamando al manejador y mostrando el mensaje en la consola
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Custom Event Example</title>
</head>
<body>
<button id="myButton">Button</button>
<script>
const button = document.getElementById('myButton');
// Agregar manejador para el evento personalizado
button.addEventListener('myCustomEvent', function(event) {
console.log('Custom event received:', event.detail.message);
});
// Creación y despacho del evento personalizado
const myEvent = new CustomEvent('myCustomEvent', { detail: { message: '¡Hola, mundo!' } });
button.dispatchEvent(myEvent);
</script>
</body>
</html>
8.3 Aplicación de eventos personalizados
Los eventos personalizados son útiles para crear un código más modular y mantenible, especialmente al trabajar con componentes y aplicaciones complejas. Permiten que un componente notifique a otros componentes sobre cambios o acciones que han ocurrido.
Explicación:
- El Módulo A despacha un evento personalizado
notifyBen el elementomoduleB, transmitiendo datos - El Módulo B escucha el evento
notifyBy lo maneja, mostrando un mensaje en la consola
Ejemplo de uso de eventos personalizados en una aplicación modular:
<!DOCTYPE html>
<html>
<head>
<title>Module Communication Example</title>
</head>
<body>
<div id="moduleA">Module A</div>
<div id="moduleB">Module B</div>
<script>
const moduleA = document.getElementById('moduleA');
const moduleB = document.getElementById('moduleB');
// Módulo A despacha un evento personalizado
function notifyModuleB() {
const event = new CustomEvent('notifyB', { detail: { message: 'Datos del Módulo A' } });
moduleB.dispatchEvent(event);
}
// Módulo B escucha el evento personalizado
moduleB.addEventListener('notifyB', function(event) {
console.log('Module B received:', event.detail.message);
});
// Simulación de acción en el Módulo A
notifyModuleB();
</script>
</body>
</html>
8.4 Parámetros de eventos personalizados
Los eventos personalizados pueden configurarse adicionalmente con los siguientes parámetros:
bubbles: valor booleano que indica si el evento debe burbujear. Por defecto esfalsecancelable: valor booleano que indica si el evento puede ser cancelado. Por defecto esfalsecomposed: valor booleano que indica si el evento debe propagarse fuera de los shadow DOM. Por defecto esfalse
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Custom Event Parameters Example</title>
</head>
<body>
<div id="container">
<button id="myButton">Button</button>
</div>
<script>
const container = document.getElementById('container');
const button = document.getElementById('myButton');
// Agregar manejadores para el contenedor y el botón
container.addEventListener('customEvent', function(event) {
console.log('Container received:', event.detail.message);
});
button.addEventListener('customEvent', function(event) {
console.log('Button received:', event.detail.message);
});
// Creación y despacho de un evento personalizado con parámetros
const myEvent = new CustomEvent('customEvent', {
detail: { message: 'Hola desde el botón' },
bubbles: true,
cancelable: true,
composed: false
});
button.dispatchEvent(myEvent);
</script>
</body>
</html>
GO TO FULL VERSION