¡Bienvenido al laboratorio de manejo de eventos en JavaScript! Los eventos son acciones que ocurren en el navegador, como cuando un usuario hace clic en un botón, mueve el ratón o presiona una tecla. El manejo de eventos es el proceso de escribir código que responde a estos eventos, haciendo que tus páginas web sean interactivas y dinámicas.
En este laboratorio, aprenderás las formas fundamentales de manejar eventos en JavaScript. Comenzaremos con el atributo básico onclick en HTML y avanzaremos hacia el método más potente y flexible addEventListener. También aprenderás a usar el objeto event para controlar el comportamiento de los eventos y obtener información sobre ellos.
Al final de este laboratorio, serás capaz de:
Adjuntar manejadores de eventos a elementos HTML.
Separar tu lógica de JavaScript de tu estructura HTML.
Prevenir la acción predeterminada del navegador para un evento.
Identificar qué elemento disparó un evento.
¡Empecemos!
Añadir el atributo onclick al elemento HTML
En este paso, aprenderás la forma más directa de manejar un evento: utilizando un atributo de manejador de eventos HTML. El atributo onclick te permite ejecutar un fragmento de código JavaScript cuando se hace clic en un elemento. Si bien este método es simple, generalmente es mejor separar tu HTML y JavaScript, lo cual cubriremos en los siguientes pasos.
Primero, agreguemos un atributo onclick a nuestro botón.
En el explorador de archivos en el lado izquierdo del WebIDE, busca y abre el archivo index.html.
Localiza el elemento <button>.
Modifica la etiqueta del botón para incluir un atributo onclick que muestre una alerta.
Tu elemento <button> modificado debería verse así:
Después de agregar el código, guarda el archivo index.html.
Para ver tus cambios, cambia a la pestaña Web 8080 en la parte superior de la interfaz. Haz clic en el botón "Click Me", y deberías ver aparecer una alerta del navegador con el mensaje "Button Clicked!".
Usar addEventListener para el evento click
En este paso, utilizaremos el enfoque moderno y recomendado para el manejo de eventos: el método addEventListener. Este método te permite adjuntar un manejador de eventos a un elemento sin mezclar tu código JavaScript en tu marcado HTML. Esta práctica se conoce como "JavaScript no intrusivo" (unobtrusive JavaScript) y conduce a un código más limpio y mantenible.
Primero, vamos a limpiar nuestro HTML eliminando el atributo onclick que agregamos en el paso anterior.
Abre el archivo index.html.
Elimina el atributo onclick del elemento <button>. Debería verse así de nuevo:
<button id="myButton">Click Me</button>
Ahora, agreguemos el listener de eventos usando JavaScript.
Abre el archivo script.js desde el explorador de archivos. Actualmente está vacío.
document.querySelector('#myButton'): Esta línea selecciona el elemento del botón del DOM utilizando su ID, myButton.
addEventListener('click', ...): Este método se llama en el elemento del botón. Toma dos argumentos principales:
El primer argumento es el tipo de evento a escuchar, en este caso, 'click'.
El segundo argumento es la función "manejadora" o "listener" que se ejecutará cuando ocurra el evento. Aquí, estamos utilizando una función flecha anónima () => { ... }.
Guarda el archivo script.js y cambia a la pestaña Web 8080. Haz clic en el botón, y ahora deberías ver una alerta con el mensaje "Clicked with addEventListener!".
Definir la función manejadora de eventos
En este paso, aprenderás a hacer tu código aún más limpio y reutilizable definiendo una función con nombre para tu manejador de eventos. En lugar de usar una función anónima directamente dentro de addEventListener, puedes definir una función separada y luego pasar su nombre al listener.
Este enfoque es útil cuando la lógica del manejo de eventos es compleja o cuando deseas reutilizar la misma función para múltiples eventos o elementos.
Modifiquemos nuestro archivo script.js para usar una función con nombre.
Abre el archivo script.js.
Reemplaza el código existente con el siguiente:
const button = document.querySelector("#myButton");
function handleClick() {
button.textContent = "I was clicked!";
}
button.addEventListener("click", handleClick);
Esto es lo que cambió:
Definimos una nueva función llamada handleClick. Esta función contiene la lógica que se ejecutará cuando se haga clic en el botón; en este caso, cambia el texto del botón.
En addEventListener, ahora pasamos el nombre de la función handleClick como segundo argumento. Ten en cuenta que estamos pasando la referencia de la función en sí, no llamándola (es decir, handleClick, no handleClick()). El navegador invocará la función por nosotros cuando ocurra el evento de clic.
Guarda el archivo script.js y ve a la pestaña Web 8080. Haz clic en el botón. Esta vez, en lugar de una alerta, verás que el texto del botón cambia a "I was clicked!".
Prevenir la acción por defecto con preventDefault
En este paso, exploraremos el objeto event y uno de sus métodos más útiles: preventDefault(). Cuando ocurre un evento, el navegador pasa automáticamente un objeto event a la función manejadora. Este objeto contiene información sobre el evento y te permite controlar su comportamiento.
Algunos elementos HTML tienen una acción por defecto. Por ejemplo, la acción por defecto de un enlace (<a>) es navegar a la URL especificada en su atributo href. El método event.preventDefault() te permite detener la ejecución de esta acción por defecto.
Nuestro archivo index.html ya contiene un enlace con el ID myLink. Agreguémosle un listener de eventos para evitar que navegue.
Abre el archivo script.js.
Agrega el siguiente código al final del archivo:
const link = document.querySelector("#myLink");
function handleLinkClick(event) {
console.log("Link click detected, navigation prevented.");
event.preventDefault();
}
link.addEventListener("click", handleLinkClick);
Analicemos el nuevo código:
Seleccionamos el elemento <a> con el ID myLink.
Definimos una función manejadora handleLinkClick que acepta un parámetro, al que hemos llamado event. Este será el objeto de evento proporcionado por el navegador.
Dentro de la función, llamamos a event.preventDefault() para evitar que el navegador siga el enlace.
También agregamos un mensaje console.log para confirmar que nuestro manejador se está ejecutando.
Guarda el archivo script.js. Ahora, ve a la pestaña Web 8080.
Haz clic derecho en cualquier lugar de la página y selecciona "Inspeccionar" para abrir las herramientas de desarrollador del navegador.
Cambia a la pestaña "Consola" dentro de las herramientas de desarrollador.
Haz clic en el enlace "Visita LabEx (el enlace estará deshabilitado)".
Notarás dos cosas: la página no navega a labex.io, y el mensaje "Link click detected, navigation prevented." aparece en la consola.
Acceder al objetivo del evento con event.target
En este último paso, aprenderemos sobre otra propiedad importante del objeto event: event.target. Esta propiedad te da una referencia al elemento específico que desencadenó el evento. Esto es increíblemente útil, especialmente cuando tienes un único listener de eventos en un elemento padre que gestiona eventos para múltiples hijos (una técnica llamada delegación de eventos).
Para este laboratorio, usaremos event.target en un contexto más simple: para modificar el elemento en el que se hizo clic directamente, sin necesidad de una variable separada para él.
Modifiquemos la función handleClick de nuestro botón para usar event.target.
Abre el archivo script.js.
Busca la función handleClick que escribiste en el Paso 3 y modifícala para que acepte el parámetro event y use event.target.
Reemplaza la antigua función handleClick con esta nueva versión:
function handleClick(event) {
// event.target se refiere al botón en el que se hizo clic
event.target.style.backgroundColor = "lightblue";
event.target.textContent = "My color changed!";
}
Aquí está el desglose:
La función handleClick ahora acepta el objeto event como parámetro.
En lugar de usar la variable button, ahora usamos event.target para referirnos al elemento en el que se hizo clic.
event.target.style.backgroundColor = 'lightblue' cambia el color de fondo del elemento clickeado.
event.target.textContent = 'My color changed!' cambia su contenido de texto.
Tu archivo script.js completo debería verse algo así ahora:
const button = document.querySelector("#myButton");
function handleClick(event) {
// event.target refers to the button that was clicked
event.target.style.backgroundColor = "lightblue";
event.target.textContent = "My color changed!";
}
button.addEventListener("click", handleClick);
const link = document.querySelector("#myLink");
function handleLinkClick(event) {
console.log("Link click detected, navigation prevented.");
event.preventDefault();
}
link.addEventListener("click", handleLinkClick);
Guarda el archivo y cambia a la pestaña Web 8080. Haz clic en el botón. Verás que su color de fondo cambia a azul claro y su texto se actualiza a "My color changed!".
Resumen
¡Felicitaciones por completar el laboratorio de Manejo de Eventos en JavaScript! Has aprendido con éxito los conceptos centrales para hacer que las páginas web sean interactivas respondiendo a las acciones del usuario.
En este laboratorio, has cubierto:
El atributo básico onclick para el manejo de eventos simple directamente en HTML.
El método moderno y preferido addEventListener para separar responsabilidades y mantener tu código JavaScript limpio.
Cómo definir y usar funciones con nombre como manejadores de eventos para una mejor organización y reutilización del código.
El potente objeto event, utilizando event.preventDefault() para detener los comportamientos predeterminados del navegador.
Cómo identificar el elemento que desencadenó un evento usando la propiedad event.target.
Estas habilidades son fundamentales para el desarrollo web front-end y serán los pilares para crear aplicaciones web ricas, dinámicas y fáciles de usar. Sigue practicando estos conceptos para dominarlos.
