5.1 Fundamentos del trabajo con eventos
Los eventos en JavaScript permiten interactuar con el usuario y reaccionar a sus acciones, como clics de ratón, pulsaciones de teclas, cambios en formularios y mucho más. Entender cómo agregar y remover manejadores de eventos es una parte importante en el desarrollo de aplicaciones web interactivas.
¿Qué son los eventos?
Un evento es una señal del navegador que indica que algo ha ocurrido. Por ejemplo, un usuario hizo clic en un botón o se cargó una página. Los eventos permiten ejecutar ciertas acciones en respuesta a estas señales.
Tipos de eventos
Existen muchos tipos de eventos. Algunos de los más utilizados incluyen:
- Ratón:
click,dblclick,mouseover,mouseout,mousedown,mouseup,mousemove - Teclado:
keydown,keyup,keypress - Formulario:
submit,change,focus,blur - Documento/Ventana:
load,resize,scroll,unload
Manejadores de eventos
Los manejadores de eventos (o listeners de eventos) son funciones que se ejecutan en respuesta a un evento específico. Ellos "escuchan" ciertos eventos y se activan cuando tales eventos ocurren.
5.2 Agregando manejadores de eventos
Agregando manejadores de eventos con addEventListener
El método addEventListener permite agregar manejadores de eventos a los elementos. Ofrece más flexibilidad y
control en comparación con los métodos tradicionales para agregar eventos, como el uso de atributos HTML (onclick, onchange, etc.).
Sintaxis:
element.addEventListener(event, handler, options);
Dónde:
element: el elemento al que se añade el manejador de eventosevent: tipo de evento al que se debe responder (por ejemplo, 'click', 'input', 'keydown')handler: función que será llamada cuando el evento ocurraoptions: parámetros adicionales (argumento opcional)
Ejemplo: Añadiendo un manejador de evento click
En este ejemplo, se añade un manejador de evento a un botón. Cuando el usuario hace clic en el botón, aparece un mensaje de alerta.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Haz clic en mí</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('¡Botón clicado!');
});
</script>
</body>
</html>
Ejemplo: Añadiendo múltiples manejadores de eventos
Con addEventListener puedes añadir múltiples manejadores para un solo evento.
En este ejemplo, se añaden dos manejadores de eventos a un botón. Al hacer clic, ambos manejadores se ejecutan secuencialmente, mostrando mensajes correspondientes en la consola.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Haz clic en mí</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log('Primer manejador');
});
button.addEventListener('click', function() {
console.log('Segundo manejador');
});
</script>
</body>
</html>
5.3 Uso del parámetro options
El parámetro options permite personalizar el comportamiento del manejador de eventos. Las opciones más utilizadas son:
once: si estrue, el manejador se ejecuta solo una vez y luego se elimina automáticamentecapture: si estrue, el evento se maneja durante la fase de captura en lugar de la fase de propagaciónpassive: si estrue, indica que el manejador nunca llamará apreventDefault()
Ejemplo: Manejador que se ejecuta solo una vez
En este ejemplo, el manejador de eventos se ejecutará solo una vez y luego se eliminará automáticamente.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Haz clic en mí</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Esto se mostrará solo una vez');
}, { once: true });
</script>
</body>
</html>
5.4 Eliminando manejadores de eventos
Eliminando manejadores de eventos con removeEventListener
El método removeEventListener permite eliminar manejadores de eventos que se han agregado
con addEventListener. Para hacerlo, se deben pasar los mismos argumentos que se utilizaron
al agregar el manejador.
Sintaxis:
element.removeEventListener(event, handler, options)
Dónde:
element: el elemento del que se elimina el manejador de eventosevent: tipo de evento del que se quiere eliminar el manejadorhandler: función que fue asignada como manejador de eventosoptions: parámetros adicionales (deben coincidir con los utilizados al agregar el manejador)
Ejemplo: Eliminando un manejador de evento click
En este ejemplo, el manejador de evento click es añadido a un botón. Presionar otro botón elimina
el manejador de evento click.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Haz clic en mí</button>
<button id="removeButton">Eliminar manejador de clic</button>
<script>
const button = document.getElementById('myButton');
const removeButton = document.getElementById('removeButton');
function clickHandler() {
alert('¡Botón clicado!');
}
button.addEventListener('click', clickHandler);
removeButton.addEventListener('click', function() {
button.removeEventListener('click', clickHandler);
alert('Manejador de clic eliminado');
});
</script>
</body>
</html>
GO TO FULL VERSION