Ajouter un écouteur d'événement à l'élément futur (sans jQuery)

Question

Curieux si j'étais prêt à relever le défi d'écrire quelque chose d'une application de liste avec Vanilla JS. Problème: l'écouteur d'événement n'est pas ajouté aux nouveaux éléments de la liste.

ajouter un bouton de suppression aux éléments existants dans la liste:

const deleteButton = document.querySelectorAll('span'); 
deleteButton.forEach(button => button.addEventListener('click', deleteItem)); 

Je veux ajouter un bouton de suppression de nouveaux éléments.

Je sais que la méthode on() de jQuery va ajouter un écouteur pour les événements créés dynamiquement - y a-t-il un équivalent dans Vanilla JS? JQuery n'ajoute pas d'écouteurs pour les éléments créés dynamiquement.

Answer 1

Ce qu'il fait, c'est qu'il a une syntaxe qui va configurer la délégation d'événements pour vous.

Vous pouvez faire de même en écoutant un élément de conteneur et en vérifiant ce qui a été cliqué pour voir si le gestionnaire devrait fonctionner. Par exemple, ceci est à l'écoute sur le body, bien qu'un conteneur plus local soit conseillé.

document.body.addEventListener("click", function(event) { 
    if (event.target.matches("span")) { 
    deleteItem.call(this, event); 
    } 
}); 

C'est une mise en œuvre limitée car elle ne vérifie que le event.target pour voir si elle correspond au sélecteur. Pour être plus complet, vous voudrez traverser le event.target jusqu'à son .parentNode s, et vérifier chacun jusqu'à ce que vous arriviez à l'élément this.

Cela peut être facilement extrait à une fonction d'aide qui construit votre gestionnaire.

document.body.addEventListener("click", delegate("span", deleteItem)); 
 

 
function deleteItem(event) { 
 
    console.log("clicked on '%s'", this.textContent); 
 
} 
 

 
function delegate(selector, handler) { 
 
    return function(event) { 
 
    var targ = event.target; 
 
    do { 
 
     if (targ.matches(selector)) { 
 
     handler.call(targ, event); 
 
     } 
 
    } while ((targ = targ.parentNode) && targ != event.currentTarget); 
 
    } 
 
}

span { color: red; }

<div> 
 
    <span>I'm a span!</span> 
 
    Not a span 
 
    <p> 
 
    <span>Another span!</span> 
 
    </p> 
 
</div>