web-dev-qa-db-fra.com

Ajout d'écouteurs d'événement à plusieurs éléments

Je me bats avec ça depuis quelques heures maintenant.

Je souhaite ajouter un écouteur d'événement à tous les <select>s d'une page et j'ai ce code jusqu'à présent:

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 que lorsque la page est chargée et non lorsque je modifie la valeur dans l'un de mes <select>s.

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

javascriptaddeventlistener
10
Christian Lundahl

Vous devez avoir une fonction anonyme pour cela car vous appelez la fonction alert() immédiatement dans votre exemple:

 ... .addEventListener('change', function() { alert('test!')}, false ...

Pour l'instant, selon votre code, addEventListener tente d'ajouter le résultat de undefined (retour de la fonction alert()).

Ou vous pouvez simplement passer le gestionnaire de fonctions pour cela:

function alertMe() {
    alert( 'test!' );
}
...

... .addEventListener('change', alertMe, false ...

Remarque: en faisant somefunction(arg[, arg...]), vous appelez non pas fonction, mais la fonction retournée.

9
antyrat

En plus d'encapsuler la alert dans une fonction, comme mentionné précédemment, n'utilisez pas 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 éléments select sauvegardés dans une variable, ce n'est pas nécessaire, pour ne pas mentionner inefficace à get tous ces éléments, à chaque itération de boucle.

6
Cerbrus

J'ai créé la fonction simple suivante, qui parcourt tous les éléments qui correspondent à la variable selector, et ajoute un écouteur d'événement pour la variable event avec la variable handler passée.

Ceci est une fonctionnalité similaire pour la fonction $(selector).on(event, handler) de jQuery

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 le PO, la manière d’utiliser cette fonction serait la suivante:

addEventListeners("select", "change", function(evt){ console.log(evt); });

Voir aussi ma réponse pour écouteur d'événement pour les éléments actuels et futurs

1
isapir

Vous exécutez la fonction alert () immédiatement, vous devez transmettre une fonction à la fonction addEventListener à la place:

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

Event Bubbling est le concept important en javascript. Par conséquent, si vous pouvez ajouter un événement directement sur DOM, vous pouvez enregistrer quelques lignes de code:

document.addEventListener('change', function(e){
  if(e.target.tagName=="SELECT"){
   alert('SELECT CHANGED');
  }
})
0
Ayush Sharma