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.

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:

See the gist on github.

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.

Prueba el código aquí.

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:

See the gist on github.

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

Mira la demostración aquí.

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.

See the gist on github.

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. Pruébalo aquí.

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.