Hinzufügen von Ereignis-Listenern auf mehrere Elemente

Ich ve wurde kämpfen mit diesem für eine gute paar Stunden jetzt.

Ich möchte hinzufügen eines Ereignis-Listeners für alle <select>s auf einer Seite und ich habe dieses Stück code so weit:

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

Diese nur von dem der Alarm ausgelöst, wenn die Seite geladen wird und nicht, wenn ich den Wert ändern, der in jedem meiner <select>s.

Bekomme ich einen Schubs in die richtige Richtung, bitte? 🙂

InformationsquelleAutor Christian Lundahl | 2012-12-17

addeventlistener javascript

9

Müssen Sie haben es anonyme Funktion, die Sie aufrufen alert() Funktion sofort in deinem Beispiel:
```
 ... .addEventListener('change', function() { alert('test!')}, false ...
```
Jetzt nach deinem code addEventListener versucht, hinzufügen von Ergebnis undefined (return of alert() - Funktion).

Oder Sie können nur pass-Funktion handler für das:
```
function alertMe() {
    alert( 'test!' );
}
...

... .addEventListener('change', alertMe, false ...
```
Hinweis: durch somefunction(arg[, arg...]) rufen Sie verweisen nicht auf Funktion, sondern auf das, was die Funktion zurückgibt.
- Oh. Ich war positiv, ich hatte versucht, aber anscheinend nicht. Danke!!! Edit: ich sehe. Jetzt wo du es sagst macht es Sinn für mich.
- Sind Sie sicher? Ich bin nicht zu sehen, ein weiterer Fehler in Ihrem code.
- Natürlich habe ich versucht es in einigen anderen Umständen, das ist, warum es nicht funktioniert. Aber jetzt klappt es mit deiner Lösung!
InformationsquelleAutor antyrat
6

Abgesehen von der Umhüllung der alert in einer Funktion, die, wie bereits erwähnt, nicht mit 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);
    }
}
```
Haben Sie die Liste der select Elemente gespeichert werden, um eine variable, es ist nicht notwendig, nicht zu erwähnen, ineffizient zu get alle diese Elemente, jeder loop-iteration.
- Guter Punkt! Ich eigentlich nur "Versuch und Irrtum", um das Ergebnis, das ich wollte. Das ist, warum ich mochte, dass. Danke!!!
- Kein problem, "Trial and Error" ist, meiner Meinung nach, der einzige Weg, um wirklich lernen zu Programmieren, also good job 😛
- Hilfreiche Antwort, kennst du einen schnelleren Weg? Ich meine getElementByTagName kann ein wenig langsam
- Sie können eine Klasse alle Elemente, die Sie hinzufügen möchten Hörer, um den Anruf getElementsByClassName(). Die sollte ein wenig schneller.
InformationsquelleAutor Cerbrus
1

Habe ich die folgende einfache Funktion, die iteriert über alle Elemente, die mit der selector, und fügen Sie einen Ereignis-listener für die event mit der übergebenen handler.

Dies ist eine ähnliche Funktionalität für 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);
        }
    );
}
```
Also für die OP die Möglichkeit zur Verwendung dieser Funktion wäre etwa so:
```
addEventListeners("select", "change", function(evt){ console.log(evt); });
```
Siehe auch meine Antwort für Ereignis-listener für den aktuellen und zukünftigen Elemente

InformationsquelleAutor isapir

Ausführung der alert () - Funktion sofort, Sie müssen übergeben Sie die addEventListener () - Funktion eine Funktion statt, 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);
    }
}

InformationsquelleAutor Will C.

0

Ereignis-Bubbling ist das wichtige Konzept in javascript, also, wenn Sie hinzufügen können, Veranstaltung am DOM-direkt, Sie können sparen Sie einige Zeilen code :
```
document.addEventListener('change', function(e){
  if(e.target.tagName=="SELECT"){
   alert('SELECT CHANGED');
  }
})
```
InformationsquelleAutor Ayush Sharma

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.