Saltar al contenido principal

Eventos

Hasta ahora hemos aprendido a modificar una página utilizando JavaScript.

Por ejemplo, podemos cambiar un texto:

let titulo = document.querySelector("#titulo");

titulo.textContent = "Nuevo título";

Pero hay un problema. Si simplemente escribimos este código en nuestro JavaScript, se ejecutará nada más cargar la página, lo cual no siempre tiene mucho sentido. ¿Cómo conseguimos que algo ocurra cuando el usuario haga algo?

Por ejemplo:

  • Cuando pulse un botón.
  • Cuando escriba en un campo.
  • Cuando envíe un formulario.
  • Cuando haga clic en una imagen.

Para eso utilizamos los eventos.

¿Qué es un evento?

Un evento es algo que ocurre en la página y que JavaScript puede detectar.

Por ejemplo:

  • Hacer un click en un botón.
  • Pinchar sobre una imagen.
  • Escribir en un recuadro.

Imagina un timbre de una casa. Cuando alguien lo pulsa, entonces suena. Pero mientras nadie pulse el timbre no ocurrirá nada.

En una página web podemos hacer algo parecido. Únicamente cuando pulse un botón ocurrirá algo.

addEventListener()​

Para decirle a JavaScript que queremos reaccionar ante un evento utilizamos:

addEventListener()

La estructura básica es:

elemento.addEventListener("evento", funcion);

Vamos por partes. Imagina que cuando pulsemos un botón, queremos que se muestre por consola el mensaje "Has pulsado el botón".

Para añadir dicho evento de "pulsación del botón" necesitaremos siempre responder a estas preguntas:

  1. ¿Qué elemento disparará mi acción? : El botón
  2. ¿Qué acción haré sobre ese elemento (click, escribir, pasar el ratón por encima...)? : Pulsar el botón
  3. ¿Qué ocurrirá cuando haga esa acción? : Se mostrará por consola el mensaje "Has pulsado el botón"

Con estas tres preguntas respondidas es muy sencillo esctructurar nuestro addEeventListener:

Por ejemplo, para el pulsamiento del botón:

// 1. Recuperar el elemento. ¿Qué elemento disparará mi acción? : Botón
let boton = document.querySelector("#boton");

// 2. Sobre el elemento (Botón). ¿Qué acción haré sobre ese elemento? : click
boton.addEventListener("click", function() {
    // 3. ¿Qué ocurrirá cuando haga esa acción?
    console.log("Has pulsado el botón"); // Se mostrará por consola el mensaje "Has pulsado el botón"

});

Por partes sería:

  1. ¿Qué elemento disparará mi acción?
let elemento = document.getElementById("id"); // o querySelector
  1. ¿Qué acción haré sobre ese elemento (click, escribir, pasar el ratón por encima...)?
elemento.addEventListener("acción", function() {
    // ...
});
  1. ¿Qué ocurrirá cuando haga esa acción?
elemento.addEventListener("acción", function() {
    // ACCIÓN
    console.log("Has pulsado el botón");
});

click​

Uno de los eventos más utilizados es:

click

Ocurre cuando el usuario hace clic sobre un elemento.

Por ejemplo:

<button id="boton">
    Pulsar
</button>

Podemos hacer:

let boton = document.querySelector("#boton");

boton.addEventListener("click", function() {

    console.log("Botón pulsado");

});

Cada vez que el usuario pulse el botón, se ejecutará la función. Sirve para cualquier elemento HTML que pueda ser pulsado, aunque mayoritariamente se usa para botones.

Eventos y funciones​

Es importante entender qué estamos haciendo.

En este código:

boton.addEventListener("click", function() {

    console.log("Hola");

});

No estamos ejecutando la función inmediatamente.

Estamos diciendo:

"Cuando ocurra un click, ejecuta esta función."

Podemos imaginarlo como una alarma:

addEventListener()
       ↓
"Quédate atento"
       ↓
¿Ha ocurrido el evento?
       ↓
      Sí
       ↓
Ejecuta la función

Utilizar una función independiente​

También podemos definir la función por separado.

// 1. definimos la función que haga "qué queremos que pase cuando pulsemos el botón"
function saludar() {

    console.log("Hola");

}

// 2. Recuperamos el botón
let boton = document.querySelector("#boton");

// 3. Añadimos el evento pasando como parámetro el nombre de la función antes definida
boton.addEventListener("click", saludar);

Esto puede resultar útil cuando la función es más larga o queremos reutilizarla.

Es importante observar que escribimos:

saludar

y no:

saludar()

Ya que con:

saludar()

estaríamos ejecutando la función inmediatamente.

Pero con:

saludar

le estamos indicando a addEventListener() qué función debe ejecutar cuando ocurra el evento.

input​

Otro de los eventos más utilizado es:

input

Este hace referencia a cuando el usuario modifica el contenido de un campo de entrada (<input>).

Por ejemplom el siguiente HTML crea una "caja para escribir":

<input id="nombre">

Podemos "escuchar" lo que escribe el usuario usando input como ¿Qué acción haré sobre ese elemento? :

// 1. Qué elemento dispara mi acción: el Input
let nombre = document.querySelector("#nombre");

// 2. ¿Qué ocurrirá cuando haga esa acción?: Escribo en la caja (input)
nombre.addEventListener("input", function() {
    // 3. ¿Qué ocurrirá cuando haga esa acción?
    console.log("El usuario está escribiendo");

});

El evento input se ejecuta cada vez que cambia el contenido del campo.

Por ejemplo, si escribimos en la caja <input>:

Ana

el evento se producirá varias veces:

A
An
Ana

value​

Dejando un poco de lado las acciones que podemos poner en el addEventListener. Cuando trabajamos con <input>, normalmente necesitamos saber qué ha escrito el usuario.

Para ello utilizamos:

value

Por ejemplo, imaginemos tenemos un <input> donde el usuario va a escribir su nombre:

<input id="nombre">

El "input" en el addEventListener simplemente indica que vamos a controlar un evento de tipo input. Pero generalmente al trabajar con cajas de texto<input> querremos también saber qué ha escrito el usuario en dicha caja. Para ello utilizamos la sintaxis:

elemento.value

En un ejemplo sería:

// 1. Recupero el elemento de tipo input
let nombre = document.querySelector("input");

// 2. Utilizo value para saber qué hay escrito en el <input>
console.log(nombre.value);

Si el usuario ha escrito:

Jose Miguel

obtendremos en el console.log(nombre.value):

Jose Miguel

ATENCIÓN: no perder de vista nunca la diferencia entre: recuperar un elemento con querySelector/ getElementById y recuperar el texto escrito en el elemento.

Hemos de tener siempre presente que cuando hacemos:

<p id = "nombre">Maria</p>
let nombre = document.getElementById("nombre");

La variable nombre equivale a todo el elemento HTML, es decir, a:

nombre = <p id = "nombre">Maria</p>

Lo mismo ocurre con un elemento de tipo <input>. Si el HTML es:

<input id="apellido">

Y recuperamos el input:

let input_apellido = document.getElementById("apellido");

La variable input_apellido equivale a todo el elemento HTML, es decir, a:

input_apellido = <input id="apellido">

De manera que necesitamos hacer siempre alguna acción más para recuperar el contenido. En el caso del párrafo usamos textContent:

let contenido = nombre.textContent;
let apellido = input_apellido.value;

Y ahora sí, las variables contenido y apellido ya equivalen al contenido en sí:

contenido = "Maria"
apellido = lo que sea que haya escrito el usuario en el input

Importante tener el cuenta que el value solo se puede usar en elementos html de tipo <input> y <select>. Los elementos de texto comunes como <div>, <p>, <h1>, etc. no tienen .value.

Ejemplo​

Tenemos:

<input id="nombre">

<p id="resultado"></p>

Y queremos que el <p> (que ahora no tiene contenido) muestre lo que el usuario vaya escribiendo en el <input>:

// 1. Recuperar los elementos con los que vamos a inteactuar del html
let nombre = document.querySelector("#nombre");
let resultado = document.querySelector("#resultado");

// 2. Añadir un evento de tipo input
nombre.addEventListener("input", function() {
    // 3. Mostrar como contenido del <p> lo que haya escrito en el <input>
    resultado.textContent = nombre.value;

});

Ahora, si el usuario escribe:

Hola

el párrafo mostrará:

Hola

Si continúa escribiendo:

Hola mundo

el párrafo se actualizará automáticamente.

submit​

Dejando de un lado input y value continuamos con otra posible opción de acción para poner en el addEventListener. Éste aparece cuando trabajamos con formularios: submit.

Por ejemplo:

<form id="formulario">

    <input id="nombre">

    <button type="submit">
        Enviar
    </button>

</form>

El submit detecta cuándo se envía el formulario utilizando:

let formulario = document.querySelector("#formulario");

formulario.addEventListener("submit", function() {

    console.log("Formulario enviado");

});

El evento submit se produce cuando el usuario envía el formulario.

Normalmente ocurre al:

  • Pulsar un botón de tipo submit.
  • Pulsar Enter dentro del formulario.

preventDefault()​

Los formularios tienen un comportamiento predeterminado.

Por ejemplo, cuando enviamos un formulario, por defecto el navegador puede intentar recargar la página o navegar a otra página.

Muchas veces no queremos que eso ocurra porque queremos procesar los datos utilizando JavaScript antes de cambiar de página.

Para evitar el comportamiento predeterminado utilizamos:

event.preventDefault();

La instrucción event.preventDefault(); simplemente se coloca al inicio de la función para evitar que recargue la página automáticamente:

let formulario = document.querySelector("#formulario");

formulario.addEventListener("submit", function(event) {

    event.preventDefault();

    console.log("Formulario procesado con JavaScript");

});

¿Qué es event?​

En este ejemplo:

formulario.addEventListener("submit", function(event) {

    event.preventDefault();

});

event es un objeto que contiene información sobre el evento que acaba de ocurrir.

Podemos imaginarlo como un informe del evento.

Por ejemplo:

Evento:
    Tipo → submit
    Elemento → formulario
    Información → ...

Una de las cosas que podemos hacer con este objeto es:

event.preventDefault();

para evitar el comportamiento predeterminado.

Botones​

Los botones son uno de los elementos que más utilizaremos con eventos.

Por ejemplo:

<button id="boton">
    Pulsar
</button>

Podemos detectar el clic:

let boton = document.querySelector("#boton");

boton.addEventListener("click", function() {

    console.log("Has hecho click");

});

Vamos a recopilar lo visto con varios ejemplos con botones.

1. Botón para mostrar un mensaje

<button id="boton">
    Mostrar mensaje
</button>

<p id="mensaje"></p>

El siguiente programa muestra el mensaje "¡Hola!" en el <p> al hacer click en el botón:

let boton = document.querySelector("#boton");
let mensaje = document.querySelector("#mensaje");

boton.addEventListener("click", function() {

    mensaje.textContent = "¡Hola!";

});

2. Botón para cambiar una clase

Podemos combinar eventos con classList.

<p id="mensaje">
    Este mensaje cambiará
</p>

<button id="boton">
    Activar
</button>

El siguiente programa activa o desactiva la clase "activo" del <p> al hacer click en el botón:

let mensaje = document.querySelector("#mensaje");
let boton = document.querySelector("#boton");

boton.addEventListener("click", function() {

    mensaje.classList.toggle("activo");

});

3. Botón para modificar un estilo

También podemos combinar eventos con style.

<p id="mensaje">
    Hola
</p>

<button id="boton">
    Cambiar color
</button>

El siguiente programa cambia el color del <p> al hacer click en el botón:

let mensaje = document.querySelector("#mensaje");
let boton = document.querySelector("#boton");

boton.addEventListener("click", function() {

    mensaje.style.color = "blue";

});

4. Varios botones

Podemos tener varios botones y asignarles diferentes comportamientos.

<button id="rojo">
    Rojo
</button>

<button id="azul">
    Azul
</button>

<p id="mensaje">
    Texto
</p>

El siguiente programa tiene 2 botones, cada uno son su evento:

  • El rojo: cambia el color del <p> a rojo al hacer click en el botón.
  • El azul: cambia el color del <p> a rojo al hacer click en el botón.
let rojo = document.querySelector("#rojo");
let azul = document.querySelector("#azul");
let mensaje = document.querySelector("#mensaje");

rojo.addEventListener("click", function() {

    mensaje.style.color = "red";

});

azul.addEventListener("click", function() {

    mensaje.style.color = "blue";

});

Combinar input y click​

Podemos combinar varios eventos.

Por ejemplo, imaginemos un formulario donde el usuario escribe un nombre y después pulsa un botón.

<input id="nombre">

<button id="boton">
    Saludar
</button>

<p id="resultado"></p>

El siguiente programa cambia el contenido del <p> para escribir lo que el ususario ha escrito en el input al pulsar el botón:

let nombre = document.querySelector("#nombre");
let boton = document.querySelector("#boton");
let resultado = document.querySelector("#resultado");

boton.addEventListener("click", function() {

    resultado.textContent = `Hola, ${nombre.value}`;

});

Ejemplo completo: contador​

Los eventos también nos permiten crear pequeños programas interactivos.

Tenemos:

<p id="contador">
    0
</p>

<button id="sumar">
    +1
</button>

<button id="restar">
    -1
</button>

JavaScript:

let contador = document.querySelector("#contador");
let sumar = document.querySelector("#sumar");
let restar = document.querySelector("#restar");

let numero = 0;

sumar.addEventListener("click", function() {

    numero++;

    contador.textContent = numero;

});

restar.addEventListener("click", function() {

    numero--;

    contador.textContent = numero;

});

Cada vez que pulsamos +1, aumenta el número.

Cada vez que pulsamos -1, disminuye.

Resumen

Los eventos permiten que JavaScript reaccione a las acciones del usuario.

La herramienta principal es:

addEventListener()

Por ejemplo:

Los eventos que hemos visto son:

click

Se produce cuando hacemos clic.

boton.addEventListener("click", function() {

});

input

Se produce cuando cambia el contenido de un campo.

input.addEventListener("input", function() {

});

value

Permite obtener o modificar el valor de un campo.

console.log(input.value);

submit

Se produce cuando enviamos un formulario.

formulario.addEventListener("submit", function(event) {

});

preventDefault()

Evita el comportamiento predeterminado del navegador.

event.preventDefault();

La idea principal es:

Usuario realiza una acción
          ↓
        Evento
          ↓
  addEventListener()
          ↓
      Función
          ↓
JavaScript modifica la página

Ejemplos resueltos

Ejercicio resuelto 1 - Botón de saludo​

Enunciado​

Crea un botón que, al pulsarlo, cambie el texto de un párrafo a:

¡Hola!

Solución​

<button id="boton">
    Saludar
</button>

<p id="mensaje"></p>
let boton = document.querySelector("#boton");
let mensaje = document.querySelector("#mensaje");

boton.addEventListener("click", function() {

    mensaje.textContent = "¡Hola!";

});

Ejercicio resuelto 2 - Mostrar lo escrito​

Enunciado​

Crea un campo de texto y un párrafo.

Cada vez que el usuario escriba algo, el párrafo debe mostrar lo que ha escrito.

Solución​

<input id="texto">

<p id="resultado"></p>
let texto = document.querySelector("#texto");
let resultado = document.querySelector("#resultado");

texto.addEventListener("input", function() {

    resultado.textContent = texto.value;

});

Ejercicio resuelto 3 - Formulario​

Enunciado​

Crea un formulario con un campo para introducir el nombre y un botón.

Al enviarlo:

  • Evita que la página se recargue.
  • Muestra un saludo con el nombre introducido.

Solución​

<form id="formulario">

    <input id="nombre">

    <button type="submit">
        Enviar
    </button>

</form>

<p id="resultado"></p>
let formulario = document.querySelector("#formulario");
let nombre = document.querySelector("#nombre");
let resultado = document.querySelector("#resultado");

formulario.addEventListener("submit", function(event) {

    event.preventDefault();

    resultado.textContent = `Hola, ${nombre.value}`;

});