Eventos en JavaScript

¿Qué es un evento?

Un evento es una acción o suceso que ocurre en una página web y que JavaScript puede detectar y controlar. Por ejemplo:

▪ Un clic
▪ Que el ratón pase por encima
▪ Que se escriba algo
▪ Que se envíe un formulario
▪ Que se mueva el scroll
▪ Que se pulse una tecla
▪ Que se cargue la página

Utilidad

Los eventos tienen múltiples utilidades, las más destacadas son:

▪ Para hacer las páginas interactivas.
▪ Para responder a lo que hace el usuario.
▪ Para modificar contenido, colores, mostrar mensajes, validar formularios.

Eventos comunes

A continuación la lista de los principales eventos en JS y cuando se dan:

– onclick : al hacer clic (en botones, imágenes, enlaces…)

– onchange :cuando cambia el valor de un input (select, checkbox, input…)

– oninput : cuando se escribe algo (input de texto en tiempo real)

– onmouseover : cuando pasar el ratón por encima (menús, imágenes, efectos)

– onkeydown : cuando pulsas una tecla (juegos, accesos rápidos)

– onkeyup : cuando sueltas una tecla (validar mientras escribes)

– onsubmit : cuando se envía un formulario(validar antes de enviar)

– onload : cuando la página se ha cargado (cosas que se muestran al cargar)

– onscroll : cuando haces scroll en la página (animaciones, elementos que aparecen)

– onbdlclick : cuando haces doble clic (acciones especiales)

– onfocus : cuando un input recibe el foco (marcar el campo activo)

– onblur : cuando el input pierde el foco (validar al salir de un campo)

Uso y llamadas

<button id=“boton” onclick="saludar()">Clic
aquí</button>

Los eventos pueden usarse de dos modos principalmente:

– Llamados directamente en HTML:

– Llamados en JS mediante addEventListener. Esto es preferible ya que mantiene totalmente separado el condigo HTML del JS.

boton.addEventListener("click", saludar);

addEventListener

▪ Es una forma de decirle a un elemento: «Cuando pase esto… haz esto otro“
▪ Es mucho más flexible, limpio y profesional que poner onclick en el HTML.
▪ La estructura básica es esta:

elemento.addEventListener("evento", funcion);

– elemento: objeto que quieres controlar.
– “evento”: Entre comillas, el tipo de evento: clic, input,
keydown…
– función: Lo que quieres que haga cuando ocurra el evento.

Ejemplo de addEventListener:

Código HTML:

<button id="boton1">Clic aquí</button>

JavaScript:

let boton = document.getElementById("boton1");

boton.addEventListener("click", function() {
    alert("Has hecho clic");
});

¡¡¡Fíjate que si usamos addEventListener en lugar de onClick, ponemos simplemente click. Esto mismo ocurre con todos los eventos al usarlos con el addEventListener (pierden el “on”)!!!

Buenas prácticas

▪ Evitar abusar de onclick en HTML (en códigos largos dificulta el mantenimiento)
▪ Es mejor usar addEventListener desde JavaScript.
▪ Agrupar código en funciones.
▪ Separar HTML – CSS – JS.