Eventos en HTML

Conectar una acción de usuario con Javascript


En Javascript hay un concepto llamado evento que se utiliza para referirse al instante justo en el que ocurre un determinado suceso. Por ejemplo, existe un evento llamado click que se dispara cuando un usuario hace clic sobre un elemento HTML.

Nosotros podemos utilizar estos eventos para comunicar al navegador que, cuando ocurra un evento determinado, realice una acción Javascript. De esta forma, podemos preparar nuestra página para que actúe según las acciones del usuario (u otros eventos más complejos).

Eventos

Existen muchísimos tipos de eventos en Javascript. Vamos a comenzar con eventos click, que son los más sencillos de entender. Lo primero es elegir la etiqueta en la que queremos que ocurra el evento. Una vez elegida, colocaremos un atributo en dicha etiqueta para detectar si se produce el evento.

Eventos en línea

Por ejemplo, si queremos detectar el evento click, lo prefijamos con un on y lo añadimos como atributo en la etiqueta HTML:

<img src="gandalf.jpg" alt="Gandalf" onClick="alert('¡Has hecho clic!')">

En este sencillo ejemplo, hemos especificado una imagen que es la que estará «escuchando» el evento click. Si el usuario pulsa sobre ese elemento, el navegador disparará el evento y ejecutará el código Javascript al que hace referencia ese atributo. En este caso, es un código en línea, pero podría ejecutar una función u algo similar.

Si quieres saber más sobre los eventos HTML, echa un vistazo a eventos HTML.

Eventos desde Javascript

En algunas situaciones, utilizar eventos desde HTML no es lo más apropiado, ya que estás mezclando código Javascript dentro del HTML, y eso hace que sea difícil de mantener y organizar. Por esta razón, lo habitual suele ser darle un nombre al elemento mediante un id o class, y luego realizar la tarea o funcionalidad desde Javascript:

<img class="gandalf-image" src="gandalf.jpg" alt="Gandalf">

<script>
  const gandalfImage = document.querySelector(".gandalf-image");
  gandalfImage.addEventListener("click", function() {
    alert("¡Has hecho click!");
  });
</script>

Observa que en este caso, el fragmento de código Javascript de la etiqueta <script> la podemos extraer a un fichero externo y enlazarlo mediante el atributo src de la etiqueta <script>. De esta forma tendríamos separado el código y sería más fácil de mantener de cara al futuro.

Si quieres saber más sobre este enfoque, echa un vistazo a el método addEventListener().

Detalles del evento

En los eventos, puede que queramos obtener información más específica, como por ejemplo, el número de veces que hizo clic el usuario sobre la imagen, si fue un solo clic, si fue doble clic, etc... Estos datos específicos, podemos encontrarlos en un objeto que tenemos disponible en los eventos.

En este caso, en el HTML, en lugar del alert() usado antes, vamos a ejecutar una función javascript con un código diferente. Observa que también hemos añadido un párrafo de texto que contiene una frase y un fragmento <span> con id="number" que contendrá el número de veces que se ha pulsado sobre la imagen. Inicialmente se encuentra establecido a 0.

<div>
  <img class="gandalf-image" src="gandalf.jpg" alt="Gandalf">
  <p>Has hecho clic a Gandalf <span class="number">0</span> veces seguidas.</p>
</div>
const gandalfImage = document.querySelector(".gandalf-image");
const number = document.querySelector(".number");

gandalfImage.addEventListener("click", function(event) {
  number.textContent = event.detail;
});

Por otro lado, la función pasa por parámetro una variable especial event, que es la que nos va a dar la información sobre el evento ocurrido, y que posteriormente utilizaremos para extraer dicha información.

Este código busca la etiqueta HTML que tiene un id="number", y mediante .textContent modificamos su contenido. El nuevo contenido es event.detail que no es más que un dato que se encuentra en el evento click que se ha disparado. En este caso concreto, ese dato devuelve el número de veces seguidas que el usuario pulsó sobre la imagen.

Ten en cuenta que en el caso de parar de hacer click, y volver a pulsar, el contador volvería a iniciarse, ya que sólo cuenta el número de clics seguidos.

Tipos de eventos

Existen muchos eventos, prácticamente uno para cada acción que pueda ocurrir en un documento HTML. A continuación, muestro algunos grupos de eventos muy utilizados frecuentemente de la gran cantidad de eventos existentes en Javascript.

Eventos de documento

Es posible poner a escuchar ciertos eventos sobre el documento HTML completo, estableciendo el atributo del evento en la etiqueta <body>:

Tipo de eventoAtributo HTMLDescripción
UIEventonLoadLa página (el documento HTML) ha terminado de cargarse.
UIEventonUnloadLa página (el documento HTML) va a cerrarse.
UIEventonScrollEl usuario ha hecho scroll sobre la página (el documento HTML).

Eventos de carga de recursos

Sobre las etiquetas que cargan un archivo externo, como podrían ser <img> o <script>, e incluso <style> con estilos CSS en línea. Los archivos multimedia <audio> y <video> tienen sus propios eventos específicos, ya que tienen un proceso de carga especial:

Tipo de eventoAtributo HTMLDescripción
UIEventonLoadEl recurso ha terminado de cargarse en la página.
UIEventonUnloadEl recurso ha sido eliminado de la página.
UIEventonAbortEl recurso ha sido cancelado y no ha terminado su carga.
UIEventonErrorEl recurso ha dado un error y no ha terminado su carga.
UIEventonSelectEl usuario ha seleccionado un texto de un campo de datos.

Eventos de foco en elementos

Sobre etiquetas <input>, <textarea>, <select>, <a> o cualquier otra etiqueta que pueda ser seleccionable por el usuario pulsando la tecla TAB, existen una serie de eventos para controlar cuando gana o pierde el foco un elemento:

Tipo de eventoAtributo HTMLDescripción
FocusEventonBlurEl elemento ha perdido el foco (foco de salida).
FocusEventonFocusoutEl elemento ha perdido el foco (y permite bubble).
FocusEventonFocusEl elemento ha ganado el foco (foco de entrada).
FocusEventonFocusinEl elemento ha ganado el foco (y permite bubble).

Eventos de ratón

Los eventos de ratón se utilizan para detectar todas aquellas acciones que el usuario realiza mediante el ratón con algún elemento de la página, como podría ser mover el ratón por encima de ellos, hacer clic, mover la rueda del ratón, etc...

Tipo de eventoAtributo HTMLDescripción
MouseEventonClickEl usuario ha pulsado (y soltado) el elemento.
MouseEventonDblclickEl usuario ha hecho doble clic en el elemento.
MouseEventonMousedownEl usuario ha pulsado (aún sin haber soltado) el elemento.
MouseEventonMouseupEl usuario ha soltado el botón pulsado en un elemento.
MouseEventonMousemoveEl usuario ha movido el ratón.
MouseEventonMouseenterEl usuario ha movido el ratón dentro de un elemento.
MouseEventonMouseleaveEl usuario ha movido el ratón fuera de un elemento.
MouseEventonMouseoutEl usuario ha movido el ratón fuera de un elemento (bubbles).
MouseEventonMouseoverEl usuario ha movido el ratón dentro de un elemento (bubbles).
WheelEventonWheelEl usuario ha movido la rueda del ratón.

Eventos de entrada de datos

Sobre elementos <input> o elementos HTML con el atributo contentEditable, y por lo tanto, elementos HTML que son editables por el usuario:

Tipo de eventoAtributo HTMLDescripción
InputEventonBeforeInputUn elemento <input> o con atributo contentEditable a punto de cambiar.
InputEventonInputUn elemento <input> o con atributo contentEditable ha cambiado.

Eventos multimedia

Sobre elementos multimedia como <audio> o <video>, donde se carga un recurso (MP4, WebM, MP3, OGG...) externo:

Tipo de eventoAtributo HTMLDescripción
MediaEventonEmptiedEl audio o video se ha vacíado (recargar elemento).
MediaEventonLoadedMetadataSe han precargado los metadatos del audio o video (duración, subs...)
MediaEventonLoadedDataSe ha precargado el comienzo del audio o video.
MediaEventonCanPlayEl audio o video se ha precargado lo suficiente para reproducir.
MediaEventonCanPlayThroughEl audio o video se ha precargado completamente.
MediaEventonPlayEl audio o video comienza a reproducirse (tras haber sido pausado).
MediaEventonPlayingEl audio o video comienza a reproducirse.
MediaEventonPauseEl audio o video ha sido pausado.
MediaEventonTimeUpdateEl audio o video ha avanzado en su reproducción.
MediaEventonEndedEl audio o video ha completado su reproducción.
MediaEventonWaitingEl audio o video está esperando a que el buffer se complete.
MediaEventonDurationChangeEl audio o video ha cambiado su duración total (metadatos).
MediaEventonRateChangeEl audio o video ha cambiado su velocidad de reproducción.
MediaEventonVolumeChangeEl audio o video ha cambiado su volumen de reproducción.
ProgressEventonProgressEl audio o video se está descargando.
ProgressEventonLoadStartEl audio o video ha comenzado a descargarse.
MediaEventonSuspendLa precarga del audio o video ha sido suspendida (ok o pause).
UIEventonAbortLa precarga del audio o video ha sido abortada o reiniciada.
UIEventonErrorHa ocurrido un error.
MediaEventonStalledEl navegador intenta precargar el audio o video, pero se ha estancado.
MediaEventonSeekingEl navegador comenzó a buscar un momento concreto del audio/video.
MediaEventonSeekedEl navegador terminó de buscar un momento concreto del audio/video.
UIEventonResizeEl video ha sido redimensionado.

Todos estos eventos (y muchos otros no incluídos en esta sección) se pueden llamar desde Javascript para realizar personalizaciones más específicas, pero en ese caso ya hay que recurrir a Javascript y realizar tareas y metodologías de programación más específicas.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev