El manejo de eventos es un concepto importante en JavaScript. Los eventos permiten que las páginas HTML sean dinámicas e interactivas, permitiéndole crear atractivas interfaces de usuario. Puede escribir código para ejecutar JavaScript cuando ocurre un evento en el DOM.
Un evento puede ser cuando un usuario hace clic en un elemento HTML, la página se carga o cuando cambia el valor de un campo de entrada. Puede escribir código que altere la estructura HTML cuando ocurra un evento. Aprenda tres formas diferentes de agregar detectores de eventos a su código.
1. El método addEventListener
El método addEventListener es uno de los más populares métodos de escucha de eventos. Tiene tres parámetros:
- Un objeto que representa el evento.
- Una función para manejarlo.
- Un booleano opcional, useCapture, que describe cómo se propaga el evento a través del DOM.
El evento puede ser cualquier evento DOM especificado en un elemento de destino. Se configura una función para responder a ese evento cuando ocurre.
La función puede ser anónima o una función con nombre. Los destinos populares incluyen un elemento, sus elementos secundarios, un documento y una ventana que admite un evento.
addEventListener() es un método recomendado para administrar detectores de eventos en JavaScript. Funciona en cualquier objetivo de evento, no solo en elementos HTML, y admite múltiples controladores de eventos.
Es posible que desee ejecutar algún código en el DOM. Puede imprimir texto, realizar cálculos o mostrar una imagen cuando un usuario hace clic en el botón.
Ilustremos con el siguiente código:
html>
<html>
<cuerpo>
<h1>El método addEventListener con funcionesh1>
<botónidentificación="miBtn">Haga clic aquíbotón>
<pagidentificación="manifestación">pag>
cuerpo>
html>A continuación, agregue el detector de eventos con el botón.
constante elemento = documento.getElementById("miBtn");
elemento.addEventListener("hacer clic", miFuncion1);
funciónmifuncion1() {
documento.getElementById("manifestación").innerHTML += "¡Función ejecutada! "
}
Cuando hace clic en el botón, el texto 'Función ejecutada' se imprime en la pantalla, como se muestra a continuación.
2. Delegar eventos a addEventListener
Delegar un evento en JavaScript es un patrón usado para manejar múltiples eventos. En lugar de agregar un detector de eventos a cada elemento, solo agrega el detector de eventos a un elemento principal. Puede acceder al elemento que activó el evento a través de la .objetivo propiedad del objeto de evento.
Esto garantiza que todos los elementos a los que apunta tengan un comportamiento compartido. Sin él, tendría que agregar un detector de eventos a cada uno manualmente.
Este es un ejemplo de delegación de eventos:
html>
<html>
<cuerpo>
<h1> Delegación de eventos en botonesh1>
<división>
<botón>Botón 1botón>
<botón>Botón 2botón>
<botón>Botón 3botón>
división>
cuerpo>
html>
A continuación, agregue los detectores de eventos a todos los botones con solo unas pocas líneas de código.
constante división = documento.querySelector('div')div.addEventListener("hacer clic", (evento) => {
si (evento.objetivo.tagName 'BOTÓN') {
consola.registro('Botón presionado')
}
});
La delegación de eventos es un patrón basado en el burbujeo de eventos. El burbujeo de eventos ocurre cuando un elemento recibe un evento y lo transmite a sus elementos padre y ancestro en el DOM. Es un propagación de eventos concepto que sucede por defecto en JavaScript.
3. Usando el atributo onclick
Puede usar el atributo onclick para ejecutar JavaScript cuando los usuarios hacen clic en un elemento. Al igual que el método addEventListener, puede usar el método onclick para imprimir texto, realizar cálculos y cambiar las características de los elementos en el DOM.
Puede agregar el detector de eventos onclick como un controlador de eventos en línea al elemento HTML. El evento ocurre cuando un usuario hace clic en el elemento. Cambia el color del siguiente párrafo dinámicamente con el método onclick:
html>
<html>
<cuerpo>
<h1> Ejecutar eventos onClickh1>
<pagidentificación="manifestación"al hacer clic="miFuncion()">
Haz clic en mí para cambiar el color de mi texto.
pag>
cuerpo>
html>En el archivo JavaScript, agregue el siguiente código:
funciónmifunción() {
documento.getElementById("manifestación").estilo.color = "rojo";
}La salida aparecerá como se muestra:
¿Por qué aprender sobre los detectores de eventos?
Como desarrollador de JavaScript, a menudo utilizará detectores de eventos en proyectos. Puede crear numerosas funciones con detectores de eventos, incluidos eventos de burbujeo y captura. Comprender estos conceptos le facilitará la creación de interfaces dinámicas en sus aplicaciones.