Evento activador de JavaScript
- Activar los eventos predefinidos en JavaScript
- Crear evento personalizado y disparador en JavaScript
En JavaScript, se usaba un método primitivo, initEvent(), para crear nuevos eventos. La última actualización agregó la palabra clave nuevo para crear un evento personalizado. Además, hay una colección llena de eventos en el inventario creado para JavaScript.
La siguiente sección mostrará una vista previa de un ejemplo de uno de los eventos predefinidos y cómo se desencadena. Y también un evento a medida que tendrá como mecanismo de trabajo el detalle. Entonces, ¡saltemos!
Activar los eventos predefinidos en JavaScript
Aquí, seleccionaremos un cuadro de texto de entrada para la entrada de valor y luego usaremos el atributo onclick para asegurarnos de que sea equivalente a un método addEventListener().
Entonces, tomamos la instancia del campo input y lo configuramos a través de un bloque condicional. Luego, cada vez que se active el evento clic, la entrada se buscará y combinará en consecuencia.
Y así, la función de los eventos se dispara.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<title>Trigger event</title>
</head>
<body>
<input type="text" id="vals">
<button onclick="abc()">Submit</button>
<script>
function abc(){
var x = document.getElementById("vals").value;
if(x ==='1'){
console.log("1")}
else{
console.log("No!")
}
}
</script>
</body>
</html>
Producción:
Crear evento personalizado y disparador en JavaScript
Usaremos un árbol padre-hijo en la propagación de un evento de burbuja para demostrar esta instancia. La tarea principal es crear elementos form y textarea, donde form es el padre.
A continuación, creamos un evento con el nuevo CustomEvent(). El nombre de nuestro evento es cool, y toma el objeto de las burbujas como true, y el detalle será el valor del área de texto.
Más tarde, el form tendrá un eventListener que dirá que el evento cool funcionará en su contenido cuando se active. Y, por último, disparamos el evento con dispatchEvent(), y este es un eventListener para el textarea.
Veamos una vista previa del código y la salida.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<title>Trigger event</title>
</head>
<body>
<form>
<textarea></textarea>
</form>
<script>
const form = document.querySelector('form');
const textarea = document.querySelector('textarea');
const event = new CustomEvent('cool', {
bubbles: true,
detail: { text: () => textarea.value }
});
form.addEventListener('cool', (e) => console.log(e.detail.text()));
textarea.addEventListener('input', (e) => e.target.dispatchEvent(event));
</script>
</body>
</html>
Producción:
De acuerdo con el evento personalizado, se suponía que debíamos imprimir el valor de las entradas textarea. Luego, finalmente, la consola muestra que se ejecuta la salida.
