La interactividad se basa en los eventos: acciones de la persona usuaria (clic, paso del ratón, pulsación de tecla) a las que tu código puede reaccionar.

Algunos eventos habituales

  • click — se hace clic en un elemento.
  • mouseover — el ratón pasa por encima de un elemento.
  • keydown — se pulsa una tecla del teclado.

Escuchar un evento

Se asocia una reacción a un elemento con addEventListener:

const bouton = document.querySelector("button");
bouton.addEventListener("click", function() {
  alert("¡Has hecho clic!");
});

El principio es sencillo: «cuando este evento ocurra en este elemento, ejecuta esta función». La función que se facilita se llama función de retorno (callback).

Recuerda: addEventListener permite reaccionar a las acciones del usuario. Es el corazón de la interactividad de una página.

AnteriorSiguiente