La beauté de la combinaison de addEventListener() et closest()
Pour remplacer la méthode jQuery.on(), ou son ancêtre jQuery.live(), qui permettent d'attacher un événement virtuellement à des éléments qui n'existent pas encore au moment de l'appel, ces deux méthodes sont très utiles.
EventTarget.addEventListener() existe depuis longtemps. En fait, c'est Internet Explorer (encore) qui a été le dernier à l'intégrer, à sa version 9. Ça fait quand même une couple de lunes.
La méthode Element.closest(), quant à elle, est un peu plus récente. Implémentée dans Chrome et Firefox au début de 2016 et dans Edge fin 2017, elle permet d'imiter quelque peu la méthode jQuery.parent() lorsqu'elle contient un sélecteur CSS, à la différence suivante:
Considérant :
<div class='a'>
<div id='moi' class='b'><;/div>
</div>
document.getElementById('moi').closest('.b').className='b c'; // Ajoutera la classe 'c' dans div#moi
$('#moi').parent('.b').addClass('c'); // Ne fera rien.
Autrement dit, element.closest() commence à chercher à partir de lui-même, alors que $(element).parent() commence à chercher à partir de son premier parent.
addEventListener + closest = $.on()
Là où ça devient intéressant, c'est que la méthode jQuery.live(), et son successeur $.on() qui permettent d'attacher un événement à des éléments de la page qui peuvent apparaître ou disparaître en cours de route, devient plus facile à faire en javascript vanille.
Là où l'on utilisait:
$("body").on("click", "a", function(event) {
event.preventDefault();
alert("Tu as cliqué sur un lien!")
});
On peut maintenant utiliser, sans jQuery:
document.body.addEventListener("click", event => {
const a = event.target.closest("a");
if (!a) return;
event.preventDefault();
alert("Tu as cliqué sur un lien!")
});