Vanilla JS. AddEventListener, querySelector y closest

Lista de funciones nativas de Javascript para manipular el DOM

Image for post
Image for post

English version. https://medium.com/@ger86/vanilla-js-addeventlistener-queryselector-and-closest-e7e5503b6418

Hoy toca un artículo corto pero que me ha parecido interesante hacer, especialmente ahora que JQuery ha dejado de ser la librería que instálabamos nada más comenzar el desarrollo del front de una web.

Básicamente lo que quiero con este artículo es que os familiaricéis, si no lo estáis ya, con 3 funciones de Javascript que nos permiten resolver los casos de uso que tan acostumbrados estábamos hacer con JQuery. Estos son:

  • , para poder manejar los clicks en los elementos de nuestra aplicación.
  • y para seleccionar elementos en el DOM (tal y como hacíamos en su momento con .
  • para poder seleccionar el elemento padre más cercano que tengamos.

Así que, dicho esto, vamos a ver cómo usarlos.

0. ¿Qué vamos hacer?

La idea de este artículo va a ser poder detectar un click en una imagen y añadir una clase al elemento que lo contiene. Es decir, si tenemos el siguiente HTML:

<article class="an-article"> 
<header class="an-article__header">
<img src="..." alt="...">
</header>
</article>

Lo que haremos será detectar un click en la imagen y añadir una clase al elemento .

1. Seleccionando las imágenes dentro de un artículo

Lo primero de todo será conseguir seleccionar las imágenes que hay dentro de un para poder escuchar posteriormente el evento en ellas. Esto que en JQuery lo hacíamos del siguiente modo:

$('.an-article img').click(callback);

En Vanilla JS lo haremos del siguiente modo:

const articleImgs = document.querySelectorAll('.an-article img');

En la variable tendremos un array con todos los elementos que cumplan nuestro selector. En el caso de que estemos en una pantalla donde sólo haya imagen, nos bastaría con escribir la siguiente línea:

const articleImg = document.querySelector('.an-article img');

para que tenga el elemento del DOM imagen.

2. Escuchando el evento click en las imágenes

Supongamos que estamos en una vista en la que hay varias imágenes, por lo que hemos ejecutado:

const articleImgs = document.querySelectorAll('.an-article img');

Lo que queremos es ahora añadir el evento sobre ellas, para lo cual no basta con hacer (“inspirándonos en JQuery”):

articleImgs.addEventListener('click', callback)

Sino que tendremos que recorrer todas las imágenes e ir añadiendo ese evento “uno a uno”. Para recorrer el array, Vanilla JS nos provee del método , el cual usaremos del siguiente modo:

Image for post
Image for post

Las cosas importantes que encontraréis en el código anterior son:

  • nos permite iterar sobre cada elemento del array, pasándonoslo en la función que recibe como argumentos.
  • El evento lo añadimos mediante la función
  • Es necesario que comprobemos que el evento se ha lanzado sobre la propia imagen y no sobre un elemento interior o casos similares, por lo que para ello el objeto que recibimos en callback nos proporciona en su propiedad el elemento que ha recibido el click. De este modo, empleando la función podremos comprobar si dicho elemento tiene el selector de imagen que estamos buscando y, si es así, continuar la ejecución.

3. Accediendo al elemento padre

Finalmente, ahora que ya podemos detectar el click en nuestra imagen, basta con que aprendamos a seleccionar el elemento padre de cara a poder añadirle la clase que queramos.

JQuery nos proporcionaba los método y para hacer este trabajo. Por contra, en Vanilla JS tendremos que usar el método que por desgracia no está implementado en Internet Explorer:

¿Pero a quién le importa Internet Explorer a estas alturas? Pues al cliente generalmente 😄, pero por suerte en la propia documentación del método nos dan su pollyfill para que lo añadamos en el caso de que queramos tener contento a nuestro cliente con su flamante Internet Explorer:

Dicho esto, emplearemos el método para acceder al elemento padre de nuestra imagen:

Image for post
Image for post

Como veis, el método nos devuelve el elemento padre más cercano al selector que le digamos y posteriormente empleando la flamante propiedad de Javascript comprobamos si tiene la clase y en caso negativo la añadimos. ¿Fácil verdad?

4. Bonus track

En el caso de que queráis añadir toda esta lógica una vez que el DOM se ha cargado basta con que lo hagáis dentro de:

document.addEventListener('DOMContentLoaded', function() {  //}

del mismo modo que hacíamos con .

En resumen, desde el lanzamiento de ES6 esa simplificación que teníamos con JQuery se encuentra ya presente en Vanilla JS, por lo que probablemente ya no necesitéis recurrir a ella para este tipo de casos.

Os dejo el enlace al CodePen por si queréis trastear un poco más con este ejemplo, que aunque seguramente ya lo conocierais, creo que todavía no es conocido por el 100% de los desarrolladores.

¿Quieres recibir más artículos como este?

Suscríbete a nuestra newsletter:

Written by

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store