web-dev-qa-db-fra.com

ajouter un écouteur d'événements sur des éléments créés dynamiquement

Est-il possible d’ajouter un écouteur d’événement (javascript) à tous les éléments générés dynamiquement?.

pour tous les éléments créés lors du chargement de la page, j'utilise:

doc.body.addEventListener('click', function(e){
//my code
},true);

J'ai besoin d'une méthode pour appeler ce code lorsque de nouveaux éléments apparaissent sur la page, mais je ne peux pas utiliser jQuery (déléguer, activer, etc. ne peut pas fonctionner dans mon projet). Comment puis-je faire ceci?

javascriptjavascript-eventsaddeventlistenerintercept
40
jenjis

Il semble que vous deviez poursuivre une stratégie de délégation sans recourir à une bibliothèque. J'ai posté un exemple de code dans un Fiddle ici: http://jsfiddle.net/founddrama/ggMUn/

L’essentiel est d’utiliser la variable target sur l’objet event pour rechercher les éléments qui vous intéressent et répondre 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
  }
});

CAVEATS! L'exemple Fiddle n'inclut que le code destiné aux navigateurs conformes aux normes (IE9 + et à peu près toutes les versions des autres) Si vous devez prendre en charge la "version précédente" attachEvent, vous voudrez également fournissez votre propre wrapper personnalisé autour des fonctions natives appropriées. (Il y a beaucoup de bonnes discussions à ce sujet; j'aime bien la solution fournie par Nicholas Zakas dans son livre JavaScript professionnel pour les développeurs Web.)

69
founddrama

Cela 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);

Ensuite, vous pouvez utiliser masterEventHandler() pour gérer tous les clics.

12
ATOzTOA

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, à la différence qu’il utilise la méthode Element.matches() pour vérifier si la cible correspond à la chaîne de sélecteur donnée.

addDynamicEventListener(document.body, 'click', '.myClass, li', function (e) {
    console.log('Clicked', e.target.innerText);
});

Vous pouvez obtenir si de github .

1
Cristy

Délégation de la tâche anonyme à HTMLelements créée dynamiquement avec event.target.classList.contains('someClass') 

  1. renvoie true ou false

  2. 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})}})

  3. Référence: https://gomakethings.com/attaching-multiple-elements-to-a-single-event-listener-in-Vanilla-js/

  4. Bonne lecture: https://eloquentjavascript.net/15_event.html#h_NEhx0cDpml
  5. MDN: https://developer.mozilla.org/en-US/docs/Web/API/Event/Comparison_of_Event_Targets
  6. Points d'insertion: 
0
Vipul Anand