Escuchar el click de un botón o botones con JavaScript

Escuchar click de botones en JavaScript

En este post explicaré algo muy simple: cómo saber cuando un usuario hace click en un botón de JavaScript, también cuando hace click sobre muchos botones y cómo acceder al elemento del DOM.

Esto también funcionará para saber cuando alguien hace click sobre otro elemento.

Escuchar click de botones en JavaScript

Foto tomada con Polacode y marca de agua puesta con waterpy.

Vamos a usar querySelector, querySelectorAll y addEventListener para ejecutar una función en el click del elemento.

Breve introducción a querySelector

Nota: si quieres leer más sobre querySelector y querySelectorAll mira este post.

Han pasado los años y ahora ya existe querySelector, hace años se usaba getElementById, getElementsByClassName o la librería de jQuery.

¿Por qué estas funciones? bueno, porque así se obtenía la referencia a un elemento del DOM. Qué difícil era, por ejemplo, obtener todos los botones con determinada clase o atributo. Más tarde salió jQuery que simplificaba la selección así como se hace con CSS y el resto es historia.

Ahora, con document.querySelector y document.querySelectorAll podemos seleccionar más elementos de manera fácil y sin librerías de terceros.

Agregar función en el click de un botón con JavaScript

Es recomendable ponerle un id al botón, o una clase cuando son muchos, como veremos más tarde. En este caso le ponemos el id “miBoton“. Obtenemos la referencia al mismo y luego le agregamos un listener o escuchador para cuando se haga click.

Aquí el código:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Escuchar click de botón</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <button id="miBoton">Haz click sobre mí :)</button>
    <script src="script.js"></script>
  </body>
</html>

// Obtener referencia a botón
// Recuerda: el numeral o # indica id
const boton = document.querySelector("#miBoton");
// Agregar listener
boton.addEventListener("click", function(evento){
 // Aquí todo el código que se ejecuta cuando se da click al botón
 alert("Le has dado click");
});

Fíjate que accedemos al botón con un selector CSS, ya que el símbolo # indica id. Lo ponemos en una constante por buena práctica.

Después de eso agregamos un listener con addEventListener, el primer argumento es el tipo de evento (click) y el segundo una función que se llamará cuando se haga click.

Por cierto, en lugar de la función anónima, podríamos pasarle el nombre de una función definida en otro lugar.

Acceder al botón y al evento cuando se hace click

Para acceder al botón, hay que acceder a this dentro de la función. Es decir, this es el elemento del DOM. Y el evento se recibe como primer argumento en la función. Aquí otro ejemplo:

// Obtener referencia a botón
// Recuerda: el numeral o # indica id
const boton = document.querySelector("#miBoton");
// Agregar listener
boton.addEventListener("click", function (evento) {
 // Aquí todo el código que se ejecuta cuando se da click al botón
 // El evento del click
 console.log("El evento es: ", evento);
 // Para acceder al botón usamos this
 // Por ejemplo cambiemos el texto
 this.innerText = "Se cambia";
});

Con this podemos acceder o cambiar propiedades del botón, es decir, tenemos todo el elemento del DOM.

Escuchar click de muchos botones

Para eso definimos una función que será llamada en el click de cada botón, luego de ello la agregamos en el listener de cada botón.

La manera de recuperar los botones es a través de querySelectorAll, lo cual devuelve un arreglo o array con elementos del DOM. Lo recorremos y en cada iteración le agregamos el listener.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Escuchar click de botones</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <button class="botones">Soy un botón</button>
  <br><br>
  <button class="botones">Otro botón</button>
  <br><br>
  <button class="botones">Botón 3</button>
  <br><br>
  <button class="botones">Botón 4</button>
  <br><br>
  <button class="botones">Botón 5</button>
  <br><br>
  <button class="botones">Último botón</button>
  <br><br>
    <script src="script.js"></script>
  </body>
</html>

// Obtener referencia a botones
// Recuerda: el punto . indica clases
const botones = document.querySelectorAll(".botones");
// Definir función y evitar definirla de manera anónima
const cuandoSeHaceClick = function (evento) {
 // Recuerda, this es el elemento
 console.log("El texto que tiene es: ", this.innerText);

 // Podemos cambiar cualquier cosa, p.ej. el estilo
 this.style.borderColor = "blue";
}
// botones es un arreglo así que lo recorremos
botones.forEach(boton => {
 //Agregar listener
 boton.addEventListener("click", cuandoSeHaceClick);
});

Para ejemplificar, se cambia el borde de cada botón y en la consola se imprime el texto que tiene. Así, a cada botón que clickeado se marcará con un borde azul.

Escuchar click de otros elementos con JavaScript

En este caso solamente lo hicimos con botones pero podríamos hacerlo con otros elementos como un div o párrafo; en ese caso solamente cambiaríamos el selector.

Más información sobre los selectores CSS.

Aprender más sobre JavaScript.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/