Los eventos se usan en casi todas las aplicaciones web, como el evento onclick que se usa para ejecutar algún código cuando el usuario hace clic en algo. Ya hay numerosos eventos incorporados disponibles para usar, pero ¿qué pasa si queremos nuestro propio evento personalizado? Supongamos que estamos creando una aplicación de chat y queremos ejecutar algún código cuando el usuario final envíe algún mensaje. No hay un evento incorporado para detectar eso. Aquí necesitamos un evento personalizado que pueda manejar tales escenarios personalizados.
Creación de un evento personalizado: para crear un evento personalizado, usamos el constructor de eventos o la interfaz CustomEvent . El constructor de eventos crea un evento y CustomEvent crea un evento con más funciones.
Se siguen los siguientes pasos para crear uno usando un nuevo evento .
- Creamos un evento usando el constructor Event.
- Escuchamos este evento usando el método addEventListener() .
- Activamos o despachamos el evento usando el método element.dispatchEvent(eventName) .
- Ahora se ha creado un evento personalizado llamado inicio .
Sintaxis:
// To assign event
const startEvent = new Event("start");
// To trigger the event Listener
document.addEventListener("start", () => {
console.log("The start event was triggered")
});
// To trigger the Event
document.dispatchEvent(startEvent);
Ejemplo: en este ejemplo, estamos creando un evento que se activa cuando el valor de x es 5.
HTML
<html>
<body>
<script>
let x = 5;
const event = new Event("start");
document.addEventListener('start', ()=>{
console.log("Start event triggered")
});
if(x == 5){
document.dispatchEvent(event);
}
</script>
</body>
</html>
Producción:
"Start event triggered"
Creación de un evento personalizado mediante CustomEvent: la creación de eventos personalizados mediante la interfaz CustomEvent tiene la ventaja de que puede enviar datos personalizados. Se siguen los siguientes pasos para crear un nuevo CustomEvent.
- Creamos un evento personalizado usando el constructor CustomEvent.
- Esto toma dos argumentos, el primero es el nombre del evento y el segundo es un objeto que contiene los datos. El nombre de la propiedad dentro del nombre del objeto debe tener un nombre detallado ; de lo contrario, no funcionará.
- Creamos un oyente para este evento.
- Activamos o despachamos el evento.
- Se ha creado un evento personalizado que contiene datos.
Sintaxis:
// To assign event
const event = new CustomEvent("start", {
detail: {
platform : "GeeksforGeeks"
}
});
// To trigger the event Listener
document.addEventListener('start', (e)=>{
console.log(
`start event triggered on platform :
${e.detail.platform}`
);
});
// To trigger the Event
document.dispatchEvent(event);
Ejemplo 2: En este ejemplo, estamos creando un evento personalizado que se activa cuando el valor de x es 5.
HTML
<html>
<body>
<script>
let x = 5;
const event = new CustomEvent("start", {
detail: {
platform : "GeeksforGeeks"
}
});
document.addEventListener('start', (e) => {
console.log(
`Start event triggered on platform
${e.detail.platform}`
);
})
if (x == 5) {
document.dispatchEvent(event);
}
</script>
</body>
</html>
Producción:
Start event triggered on platform GeeksforGeeks
Nota: Estamos enviando el evento directamente desde el documento usando document.dispatchEvent(‘start’) , pero uno puede enviar el evento desde cualquier elemento necesario como myBtn.dispatchEvent(‘start’) .
Publicación traducida automáticamente
Artículo escrito por _saurabh_jaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA