ajouter un écouteur d'événement sur les éléments créés dynamiquement
est-il possible d'ajouter event listener (javascript) à tous les éléments générés dynamiquement? Je ne suis pas le propriétaire de la page, donc je ne peux pas ajouter un écouteur de manière statique.
pour tous les éléments créés lorsque la page est chargée j'utilise:
doc.body.addEventListener('click', function(e){
//my code
},true);
j'ai besoin d'une méthode pour appeler ce code quand de nouveaux éléments apparaissent sur la page, mais je ne peux pas utiliser jQuery (delegate, on, etc ne peut pas fonctionner dans mon projet). Comment puis-je faire cela?
5 réponses
il semble que vous ayez besoin de poursuivre une stratégie de délégation sans vous rabattre sur une bibliothèque. J'ai posté quelques exemples de code dans un violon ici:http://jsfiddle.net/founddrama/ggMUn/
L'essentiel c'est d'utiliser le target sur le event objet à rechercher les éléments qui vous intéressent, et de réagir en conséquence. Quelque chose comme:
document.querySelector('body').addEventListener('click', function(event) {
if (event.target.tagName.toLowerCase() === 'li') {
// do your action on your 'li' or whatever it is you're listening for
}
});
mises en garde! L'exemple Fiddle ne comprend que le code pour les navigateurs conformes aux normes (c'est à dire, IE9+, et à peu près toutes les versions de tous les autres) Si vous avez besoin de soutien "vieux IE" attachEvent, alors vous voudrez également fournir votre propre wrapper personnalisé autour des fonctions natives appropriées. (Il y a beaucoup de bonnes discussions là-bas à ce sujet; J'aime la solution que Nicolas Zakas fournit dans son livre JavaScript Professionnel pour les développeurs web.)
Dépend de la façon dont vous ajoutez de nouveaux éléments.
si vous ajoutez en utilisant createElement, vous pouvez essayer ceci:
var btn = document.createElement("button");
btn.addEventListener('click', masterEventHandler, false);
document.body.appendChild(btn);
alors vous pouvez utiliser masterEventHandler() pour gérer tous les clics.
j'ai créé une petite fonction pour ajouter des écouteurs d'événements dynamiques, similaire à jQuery.on().
il utilise la même idée que la réponse acceptée, seulement qu'il utilise le Element.matches() méthode pour vérifier si la cible correspond à la chaîne de sélection donnée.
addDynamicEventListener(document.body, 'click', '.myClass, li', function (e) {
console.log('Clicked', e.target.innerText);
});
Vous pouvez obtenir si à partir de github.
délégation de la anonyme de la tâche à créé dynamiquement HTMLelementsevent.target.classList.contains('someClass')
- retourne
trueoufalse par exemple.
let myEvnt = document.createElement('span');myEvnt.setAttribute('class', 'someClass');myEvnt.addEventListener('click', e => {if(event.target.classList.contains('someClass')){console.log(${event.currentTarget.classList})}})référence: https://gomakethings.com/attaching-multiple-elements-to-a-single-event-listener-in-vanilla-js/
- Bonne Lecture: https://eloquentjavascript.net/15_event.html#h_NEhx0cDpml
- MDN : https://developer.mozilla.org/en-US/docs/Web/API/Event/Comparison_of_Event_Targets
- Points D'Insertion:
Utiliser classList propriété pour lier plus d'une classe à la fois
var container = document.getElementById("table");
container.classList.add("row", "oddrow", "firstrow");