Eventos son acciones o sucesos que suceden en una aplicación web.
Se activan mediante interacciones del usuario, como hacer clic en un botón, pasar el cursor sobre un elemento o presionar una tecla del teclado.
Otros ejemplos de eventos incluyen cambiar el tamaño de una ventana, desplazar un documento o cargar una página.
Los eventos se pueden utilizar para hacer que una aplicación web sea más interactiva y receptiva proporcionando comentarios al usuario y desencadenando acciones basadas en la entrada del usuario.
Manejo de eventos en JavaScript
Para manejar eventos en JavaScript, podemos usar detectores de eventos.
Los detectores de eventos son funciones que se llaman cuando ocurre un evento específico en un elemento de destino.
Podemos agregar un detector de eventos a un elemento usando el método `addEventListener()`.
El primer argumento de `addEventListener()` es el nombre del evento y el segundo argumento es la función del controlador de eventos.
```javascript
botón constante =document.querySelector('botón');
// Agrega un detector de eventos para el evento 'clic' en el botón
button.addEventListener('hacer clic', () => {
console.log('¡Se hizo clic en el botón!');
});
```
En el ejemplo anterior, agregamos un detector de eventos a un elemento de botón para el evento "clic".
Cuando el usuario hace clic en el botón, se ejecuta la función del controlador de eventos y el mensaje "¡Se hizo clic en el botón!" se registra en la consola.
También podemos eliminar detectores de eventos de elementos usando el método `removeEventListener()`.
El primer argumento de `removeEventListener()` es el nombre del evento y el segundo argumento es la función del controlador de eventos.
```javascript
button.removeEventListener('hacer clic', () => {
console.log('¡Se hizo clic en el botón!');
});
```
En el ejemplo anterior, eliminamos el detector de eventos para el evento "clic" del elemento del botón.
Esto significa que la función del controlador de eventos ya no se ejecutará cuando el usuario haga clic en el botón.
Objeto de evento
Cuando ocurre un evento, un objeto llamado objeto de evento se crea.
El objeto de evento contiene información sobre el evento, como el elemento de destino, el tipo de evento y la posición del mouse.
Podemos acceder al objeto de evento en una función de controlador de eventos usando el parámetro `event`.
```javascript
button.addEventListener('clic', (evento) => {
consola.log(evento);
});
```
En el ejemplo anterior, registramos el objeto de evento en la consola.
Esto nos permitirá ver información sobre el evento de clic, como el elemento de destino, el tipo de evento y la posición del mouse.
Burbujeo y captura de eventos
Evento burbujeante se refiere a la forma en que los eventos se propagan a través del árbol DOM.
Cuando ocurre un evento, primero se activa en el elemento objetivo.
Si el elemento de destino no tiene un detector de eventos para el evento, el evento se transmitirá al elemento principal.
Esto continúa hasta que el evento llega a la cima del árbol DOM.
Captura de eventos es lo opuesto al evento burbujeante.
Cuando la captura de eventos está activada, los eventos primero se activan en la parte superior del árbol DOM y luego se propagan hacia abajo hasta el elemento de destino.
Podemos activar la captura de eventos configurando el tercer parámetro del método `addEventListener()` en `true`.
```javascript
button.addEventListener('clic', (evento), verdadero);
```
En el ejemplo anterior, activamos la captura de eventos para el evento "clic" en el elemento del botón.
Esto significa que el evento "clic" primero se activará en la parte superior del árbol DOM y luego se propagará hacia abajo hasta el elemento del botón.
Conclusión
Los eventos son una parte fundamental de JavaScript y se utilizan para hacer que las aplicaciones web sean más interactivas y receptivas.
Al comprender cómo funcionan los eventos, podemos crear aplicaciones web que sean más divertidas y fáciles de usar.