Wie kann ich Ereignis-Listener mehreren Objekten ohne Bereichskonflikte zuweisen?

Ereignis-Listener-Zuweisung mithilfe iterativer Funktionen

Wenn Sie eine Schleife verwenden, um Ereignis-Listener zu mehreren Objekten hinzuzufügen, kann es so aussehen, als würden alle Listener auf die referenzieren dasselbe Objekt, normalerweise das letzte in der Schleife. Dies liegt daran, wie JavaScript mit Variablenbereichen und Funktionsabschlüssen umgeht.

Um dieses Problem zu beheben, verwenden Sie den folgenden Ansatz:

// Autoloading function to add the listeners:
var elem = document.getElementsByClassName("triggerClass");

for (var i = 0; i < elem.length; i += 2) {
  (function () {
    var k = i + 1;
    var boxa = elem[i].parentNode.id;
    var boxb = elem[k].parentNode.id;

    elem[i].addEventListener("click", function() { makeItHappen(boxa, boxb); }, false);
    elem[k].addEventListener("click", function() { makeItHappen(boxb, boxa); }, false);
  }());
}

In diesem Code wird eine anonyme Funktion um das Innere gewickelt Umfang, wodurch für jede Iteration ein Abschluss erstellt wird. Durch die sofortige Ausführung der Funktion mit dem Operator „()“ verfügt jede Iteration über ihren eigenen privaten Bereich, wodurch sichergestellt wird, dass die darin enthaltenen Variablen und Funktionen nicht mit denen anderer Iterationen in Konflikt geraten.

Dieser Ansatz gewährt jedem Ereignis-Listener Zugriff auf die vorgesehenen Variablen, wodurch das Problem gelöst wird, dass alle Listener auf dasselbe Objekt abzielen.

Das obige ist der detaillierte Inhalt vonWie kann ich Ereignis-Listener mehreren Objekten ohne Bereichskonflikte zuweisen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!