Hinzufügen von Ereignis-Listenern zu mehreren Elementen

Question

Ich habe jetzt seit ein paar Stunden damit zu kämpfen.

Ich möchte ein Ereignis-Listener für alle <select> s auf einer Seite hinzuzufügen, und ich habe dieses Stück Code wurde so weit:

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

Dies löst nur die Warnung, wenn die Seite geladen wird, und nicht, wenn Ich ändere den Wert in irgendeinem meiner <select> s.

Kann ich bitte einen Schubs in die richtige Richtung bekommen? :-)

Answer 1

Sie müssen dafür gibt es anonyme Funktion haben, wie Sie alert() Funktion sofort in Ihrem Beispiel aufrufen:

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

Vorerst nach Ihren Code addEventListener versucht Ergebnis undefined (Rückkehr von alert() hinzufügen Funktion).

Oder Sie können einfach Funktion Handler für das passieren:

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

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

Hinweis: dass, indem sie somefunction(arg[, arg...]) rufen Sie nicht funktionieren verweisen, sondern auf welche Funktion zurückkehrt.

Answer 2

Sie sind die alert() Funktion sofort ausgeführt wird, müssen Sie die addEventListener Funktion eine Funktion stattdessen passieren, so:

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

Answer 3

Abgesehen von den alert in einer Funktion Einwickeln, wie bereits erwähnt, nicht verwenden getElementsByTagName für jede Iteration der Schleife:

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

Sie haben die Liste der select Elemente einer variablen gespeichert, dann ist es nicht notwendig, nicht zu erwähnen, ineffizient get all diesen Elemente, jede Schleifeniteration.

Answer 4

Ich habe die folgende einfache Funktion erstellt, die über alle Elemente iteriert, die mit selector übereinstimmen, und einen Ereignis-Listener für event mit dem übergebenen handler hinzufügen.

Dieses ähnliche Funktionalität für jQuery $(selector).on(event, handler) der

function addEventListeners(selector, event, handler, useCapture){ 

    useCapture = useCapture || false; 

    Array.prototype.forEach.call(
     document.querySelectorAll(selector) 
     ,function(el, ix) { 
      el.addEventListener(event, handler, useCapture); 
     } 
    ); 
} 

Also für den OP der Weg, um diese Funktion zu nutzen, wie so wäre:

für Event listener for current and future elements meine Antwort

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

Siehe auch

Answer 5

Event Bubbling ist das wichtigste Konzept in JavaScript. Wenn Sie also ein Ereignis direkt auf DOM hinzufügen können, können Sie einige Codezeilen speichern:

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