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

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:

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:

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.

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.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 3,477 suscriptores


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/

0 Comentarios

Deja un comentario

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: