Wie kann ich JavaScript-Ereignis-Listener aus ihren eigenen Definitionen entfernen?

JavaScript-Ereignis-Listener innerhalb ihrer Definitionen entfernen

Bei der Arbeit mit Ereignis-Listenern in JavaScript kann es Situationen geben, in denen Sie einen Listener entfernen müssen aus der Definition eines anderen Zuhörers. Diese Situation kann auftreten, wenn eine bestimmte Bedingung erfüllt ist, beispielsweise das Erreichen einer bestimmten Klickanzahl.

Lösung:

Um einen Ereignis-Listener innerhalb seiner eigenen Definition zu entfernen, müssen Sie kann benannte Funktionen nutzen. Anstatt der Methode addEventListener() eine anonyme Funktion zuzuweisen, erstellen Sie eine benannte Funktion und übergeben Sie sie als zweites Argument.

var click_count = 0;

function myClick(event) {
  click_count++;
  if (click_count == 50) {
    canvas.removeEventListener('click', myClick);
  }
}

canvas.addEventListener('click', myClick);

In diesem Beispiel ist myClick eine benannte Funktion, die der Methode addEventListener() zugewiesen ist . Wenn das Klickereignis ausgelöst wird, erhöht die Funktion myClick die Variable click_count. Wenn die Anzahl 50 erreicht, wird der Listener mit „removeEventListener()“ entfernt.

Alternativer Ansatz:

Wenn Sie eine anonyme Funktion verwenden oder den Klickzähler schließen müssen Variable können Sie einen Abschluss erstellen. Ein Abschluss ermöglicht einer inneren Funktion den Zugriff auf Variablen aus ihrem äußeren Bereich, selbst nachdem die Ausführung der äußeren Funktion abgeschlossen ist.

var myClick = (function(click_count) {
  var handler = function(event) {
    click_count++;
    if (click_count == 50) {
      canvas.removeEventListener('click', handler);
    }
  };
  return handler;
})(0);

canvas.addEventListener('click', myClick);

Hier erstellt die myClick-Funktion einen inneren Abschluss, der die Handler-Funktion und die Variable click_count kapselt .

Mehrere Zuhörer:

Wenn Sie mehrere Zuhörer hinzufügen müssen Wenn Sie über eigene Zähler verfügen, können Sie eine Funktion höherer Ordnung erstellen, die eine neue Funktion mit einem eigenen Zähler generiert.

var myClick = function(click_count) {
  var handler = function(event) {
    click_count++;
    if (click_count == 50) {
      canvas.removeEventListener('click', handler);
    }
  };
  return handler;
};

canvas.addEventListener('click', myClick(0));

Das obige ist der detaillierte Inhalt vonWie kann ich JavaScript-Ereignis-Listener aus ihren eigenen Definitionen entfernen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!