Eventos en JavaScript: qué son y cómo usar addEventListener

Un evento en JavaScript es una señal de que algo ha ocurrido dentro de una página web.

Los nodos del DOM generan eventos constantemente. El usuario puede hacer clic, mover el mouse, escribir con el teclado, enviar un formulario o enfocar un campo. Todas esas acciones generan señales que JavaScript puede escuchar y manejar.

Qué es un evento en JavaScript

Un evento indica que algo pasó en la página.

Por ejemplo:

• El usuario hizo clic en un botón.
• El mouse pasó por encima de un elemento.
• Se presionó una tecla.
• Se envió un formulario.
• Un campo recibió el foco.

Estas señales se generan constantemente, pero JavaScript solo reacciona cuando nosotros decidimos escucharlas.

Tipos de eventos comunes

Existen muchos tipos de eventos en JavaScript. Algunos de los más utilizados son:

• Eventos del mouse: click, mouseover.
• Eventos del teclado: keydown, keyup.
• Eventos de formulario: submit, focus.
• Eventos del documento: permiten reaccionar a cambios o acciones dentro del documento.

Qué es un handler o manejador de eventos

Para reaccionar a un evento, necesitamos asignar un manejador.

Un handler, también llamado manejador o manipulador, es una función que se ejecuta cuando ocurre un evento.

Por ejemplo, si un usuario hace clic en un botón, podemos ejecutar una función que muestre un mensaje, cambie un texto o modifique el estilo del elemento.

Formas de asignar eventos en JavaScript

Existen varias formas de asignar un manejador a un evento:

• Como atributo directamente en HTML.
• Como propiedad del elemento en el DOM.
• Con el método addEventListener().

La forma más recomendable y flexible suele ser addEventListener(), porque permite mantener el JavaScript separado del HTML y añadir varios manejadores para un mismo evento.

Asignar un evento como atributo HTML

La primera forma consiste en colocar el evento directamente en el HTML.

<button class="btn" onclick="console.log('Hola')">Pulsarlo</button>

Cuando el usuario haga clic en el botón, se ejecutará el código indicado en onclick.

También podríamos llamar una función definida en JavaScript.

<button class="btn" onclick="saludar()">Pulsarlo</button>

function saludar() { console.log("Hola"); }

Esta forma funciona, pero puede volverse difícil de mantener porque mezcla HTML con JavaScript.

Asignar un evento como propiedad del elemento

Otra forma es seleccionar el elemento desde JavaScript y asignar una función a una propiedad como onclick.

const button = document.querySelector(".btn"); button.onclick = function() { console.log("Hola desde la propiedad"); };

En este caso, todo se controla desde el archivo JavaScript.

El manejador del evento click es una función anónima que se ejecuta cuando el usuario pulsa el botón.

Por qué setAttribute no funciona igual

Puede parecer que también podríamos usar setAttribute() para asignar un evento, pero no funciona igual.

button.setAttribute("onclick", function saludar() { console.log("Hola desde el atributo"); });

El problema es que los atributos HTML se guardan como cadenas de texto. Por eso, en este caso no estamos asignando una función real como manejador del evento.

Para trabajar con eventos desde JavaScript, es mejor usar propiedades del DOM o, preferiblemente, addEventListener().

Limitación de usar onclick como propiedad

Asignar eventos con una propiedad como onclick tiene una limitación importante: solo puede existir un manejador para esa propiedad.

button.onclick = function() { console.log("Hola"); }; button.onclick = function() { console.log("Adiós"); };

En este caso, el segundo manejador sobrescribe al primero. Por eso solo se ejecutará el último.

Usar addEventListener

La forma más recomendable para trabajar con eventos es usar addEventListener().

const button = document.querySelector(".btn"); button.addEventListener("click", function() { console.log("Hola"); });

El primer parámetro es el tipo de evento que queremos escuchar. En este caso, click.

El segundo parámetro es la función que se ejecutará cuando ocurra el evento.

Añadir varios manejadores al mismo evento

Una ventaja de addEventListener() es que permite añadir varios manejadores al mismo evento sin sobrescribir los anteriores.

button.addEventListener("click", function() { console.log("Hola"); }); button.addEventListener("click", function() { console.log("Adiós"); });

Cuando se haga clic en el botón, se ejecutarán ambos manejadores.

Usar funciones flecha como callback

También podemos usar una función flecha como callback.

button.addEventListener("click", () => { console.log("Hola desde addEventListener"); });

Esta forma es muy habitual cuando trabajamos con eventos en JavaScript moderno.

Usar una función nombrada como manejador

Otra opción es crear una función aparte y pasarla como manejador.

const button = document.querySelector(".btn"); function despedir() { console.log("Adiós"); } button.addEventListener("click", despedir);

Esta forma puede ayudar a organizar mejor el código cuando la lógica del evento empieza a crecer.

El objeto event

Cuando ocurre un evento, JavaScript puede enviar un objeto con información sobre lo que pasó.

function manejarClick(event) { console.log(event); } button.addEventListener("click", manejarClick);

Ese objeto se suele llamar event y contiene información sobre el evento ejecutado.

La propiedad target

Una de las propiedades más usadas del objeto event es target.

event.target hace referencia al elemento que emitió el evento.

function manejarClick(event) { console.log(event.target); } button.addEventListener("click", manejarClick);

En este caso, event.target será el botón que recibió el clic.

Cambiar el contenido al hacer clic

Con los eventos podemos modificar elementos de la página de forma dinámica.

Por ejemplo, podemos cambiar el texto de un botón cuando el usuario haga clic.

const button = document.querySelector(".btn"); button.addEventListener("click", (event) => { event.target.textContent = "Me hiciste clic"; });

Cuando el usuario pulse el botón, el texto cambiará automáticamente.

Por qué los eventos son importantes

Los eventos permiten que una página web reaccione a las acciones del usuario.

Gracias a ellos podemos crear botones interactivos, formularios dinámicos, menús desplegables, validaciones, animaciones y muchas otras funcionalidades.

Sin eventos, una página web sería mucho menos interactiva.

Resumen de conceptos importantes

• Un evento es una señal de que algo ocurrió en la página.
• Un manejador es una función que se ejecuta cuando ocurre un evento.
• Los eventos pueden asignarse desde HTML, desde propiedades del DOM o con addEventListener().
• addEventListener() es la forma más recomendable.
• El objeto event contiene información sobre el evento.
• event.target indica qué elemento emitió el evento.

Conclusión

Los eventos son una parte fundamental de JavaScript en el navegador.

Permiten escuchar acciones del usuario y ejecutar funciones cuando algo sucede en la página.

Aunque existen varias formas de asignar eventos, addEventListener() es la opción más flexible y recomendable, porque permite separar mejor el JavaScript del HTML y añadir varios manejadores a un mismo evento.

Entender los eventos, los manejadores y el objeto event es clave para crear páginas web dinámicas e interactivas.