Wie vermeidet man Abschlussprobleme bei der Verwendung von Ereignis-Listenern in einer Schleife?

Vermeiden von Abschlussproblemen bei der Verwendung von Ereignis-Listenern in einer Schleife

Bei Ihrem Versuch, Ereignis-Listener mithilfe einer for-Schleife an mehrere Elemente anzuhängen, haben Sie Ich bin auf das Problem gestoßen, dass alle Listener letztendlich auf das letzte Objekt abzielen. Dies liegt an der Art und Weise, wie Abschlüsse in JavaScript funktionieren.

Verstehen von Abschlüssen

Wenn eine Funktion auf eine Variable verweist, die außerhalb ihres Gültigkeitsbereichs deklariert wurde, behält sie auch dann den Zugriff auf diese Variable nachdem die Funktion beendet wurde. In Ihrem Fall verweisen die in der Schleife definierten Ereignis-Listener-Funktionen auf boxa und boxb, die außerhalb der Schleife definiert sind. Wenn die Schleife abgeschlossen ist, verweisen diese Variablen auf die letzten Elemente in der Schleife.

Beheben des Problems

Um dieses Abschlussproblem zu vermeiden, können Sie eine sofort aufgerufene Funktion verwenden Ausdruck (IIFE) innerhalb der Schleife. Ein IIFE erstellt einen neuen Bereich, sodass auf die darin deklarierten Variablen außerhalb der Funktion nicht zugegriffen werden kann.

Überarbeiteter Code

Hier ist der überarbeitete Code mit den vorhandenen IIFEs:

// Function to run on click:
function makeItHappen(elem, elem2) {
  var el = document.getElementById(elem);
  el.style.backgroundColor = "red";
  var el2 = document.getElementById(elem2);
  el2.style.backgroundColor = "blue";
}

// 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);
  }()); // immediate invocation
}

Durch die Verwendung der IIFEs stellen Sie sicher, dass jede Ereignis-Listener-Funktion ihren eigenen Bereich hat, wodurch das Abschlussproblem vermieden wird. Jetzt zielt jeder Ereignis-Listener korrekt auf das entsprechende Element innerhalb der Schleife.

Das obige ist der detaillierte Inhalt vonWie vermeidet man Abschlussprobleme bei der Verwendung von Ereignis-Listenern in einer Schleife?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!