Ajouter des écouteurs d'événement à plusieurs éléments

J'ai eu du mal avec ce pour un bon couple d'heures maintenant.

Je veux ajouter un écouteur d'événement pour tous les <select>s sur une page et j'ai ce bout de code pour l'instant:

onload = function(e) {
    sels = document.getElementsByTagName('select');
    for(i=0; i<sels.length; i++) {
        sels[i].addEventListener('change', alert('test!'), false);
    }
}

Cela ne déclenche l'alerte lorsque la page est chargée et pas lorsque je change la valeur dans l'une de mes <select>s.

Puis-je obtenir un coup de pouce dans la bonne direction, s'il vous plaît? 🙂

InformationsquelleAutor Christian Lundahl | 2012-12-17

addeventlistener javascript

9

Vous avez besoin d'avoir leur fonction anonyme pour ce que vous appelez alert() fonction immédiatement dans votre exemple:
```
 ... .addEventListener('change', function() { alert('test!')}, false ...
```
Pour l'instant en fonction de votre code addEventListener tente d'ajouter le résultat de undefined (retour de alert() fonction).

Ou vous pouvez simplement passer à la fonction de gestionnaire pour qu':
```
function alertMe() {
    alert( 'test!' );
}
...

... .addEventListener('change', alertMe, false ...
```
Remarque: en faisant somefunction(arg[, arg...]) vous appeler en référence non pas à la fonction, mais à ce que la fonction renvoie.
- Oh. J'étais séropositive, j'avais essayé, mais apparemment pas. Merci!!!! Edit: je vois. Maintenant que vous le dites, il fait sens pour moi.
- Êtes-vous sûr? Je ne vois pas une autre erreur dans votre code.
- Bien sûr, je l'ai essayé dans d'autres circonstances, c'est pourquoi il n'a pas fonctionné à l'époque. Mais maintenant, il fonctionne avec votre solution!
InformationsquelleAutor antyrat
6

Côté de emballage de la alert dans une fonction, comme mentionné avant, ne pas utiliser de getElementsByTagName pour chaque itération de la boucle:
```
onload = function(e) {
    sels = document.getElementsByTagName('select');
    for(i=0; i<sels.length; i++) {
        sels[i].addEventListener('change', function(){alert('test!')}, false);
    }
}
```
Vous avez la liste des select éléments enregistrés à une variable, il n'est pas nécessaire, pour ne pas mentionner inefficace de get tous ces éléments, à chaque itération de boucle.
- Bon point! En fait je viens de utilisés "essai et erreur" pour obtenir le résultat que je voulais. C'est pourquoi je l'ai fait comme ça. Merci!!!!
- Pas de problème, "Essai et Erreur" est, à mon avis, la seule façon de vraiment apprendre à programmer, donc du bon travail 😛
- Réponse utile, connaissez-vous une méthode plus rapide? Je veux dire getElementByTagName peut être un peu lent
- Vous pouvez donner une classe à tous les éléments que vous souhaitez ajouter auditeur à l'appel getElementsByClassName(). Ce qui devrait être un peu plus vite.
InformationsquelleAutor Cerbrus
1

J'ai créé la fonction suivante, qui itère sur tous les éléments qui correspondent à la selector, et ajouter un écouteur d'événement pour la event avec le passé handler.

C'est une fonctionnalité similaire pour jQuery $(selector).on(event, handler)
```
function addEventListeners(selector, event, handler, useCapture){

    useCapture = useCapture || false;

    Array.prototype.forEach.call(
        document.querySelectorAll(selector)
       ,function(el, ix) { 
          el.addEventListener(event, handler, useCapture);
        }
    );
}
```
Donc pour l'OP de la manière d'utiliser cette fonction afin de:
```
addEventListeners("select", "change", function(evt){ console.log(evt); });
```
Voir aussi ma réponse pour Écouteur d'événement pour les actuels et futurs des éléments

InformationsquelleAutor isapir

Vous êtes l'exécution de la fonction alert() immédiatement, vous devez passer à la méthode addEventListener fonction une fonction à la place, donc:

onload = function(e) {
    sels = document.getElementsByTagName('select');
    for(i=0; i<sels.length; i++) {
        document.getElementsByTagName('select')[i].addEventListener('change', function () { alert('test!'); }, false);
    }
}

InformationsquelleAutor Will C.

0

De remontée d'événements est le concept le plus important en javascript, donc si vous pouvez ajouter un événement sur les DOM directement, vous pouvez enregistrer quelques lignes de code :
```
document.addEventListener('change', function(e){
  if(e.target.tagName=="SELECT"){
   alert('SELECT CHANGED');
  }
})
```
InformationsquelleAutor Ayush Sharma

Vous devez vous connecter pour publier un commentaire.