So erstellen Sie einmalige Ereignisse in JavaScript

Viele JavaScript -Aufgaben erfordern Ereignisse, die nur einmal abfeuern. Denken Sie an eine Miniaturansicht, die ein Video auf dem ersten Klick lädt, oder eine Schaltfläche "More", die zusätzliche Inhalte über Ajax abholt. Das wiederholte Auslösen desselben Ereignishandlers ist ineffizient und kann zu unerwartetem Verhalten führen (z. B. redundante Datenbelastung). Glücklicherweise ist die Erstellung von Einzelverwendungs-Event-Handlern in JavaScript unkompliziert. Der Prozess beinhaltet normalerweise:

1. Anbringen eines Handlers: Ein Ereignishandler (eine Funktion) wird einem Ereignis zugewiesen (wie ein Klick).
2. Handlerausführung: Der Handler läuft, wenn das Ereignis auftritt.
3. Handlerentfernung: Der Handler wird dann abgelöst, wodurch die weitere Ausführung bei nachfolgenden Ereignissen verhindert wird.

Verwenden Sie die one() -Methode von JQuery

Wenn Sie JQuery verwenden, ist die einfachste Lösung die one() -Methode:

$("#myelement").one("click", function() {
  alert("This message appears only once!");
});

Dies funktioniert genau wie andere JQuery -Ereignismethoden. Eine detaillierte Dokumentation finden Sie in der Jquery -API: https://www.php.cn/link/55e71b4408e917b9c7bb0df7d0b81af4 .

selbstauflösende Handler (einfach JavaScript)

In einfacher JavaScript kann jede Handlerfunktion sich selbst entfernen:

document.getElementById("myelement").addEventListener("click", handler);

function handler(e) {
  e.target.removeEventListener(e.type, arguments.callee);
  alert("This message appears only once!");
}

Die Zeile e.target.removeEventListener(e.type, arguments.callee); entfernt den Handler nach seiner ersten Anrufung. Dies funktioniert unabhängig vom Namen des Handlers oder des Ereignisentyps. Beachten Sie, dass arguments.callee im strengen Modus nicht unterstützt wird. Im modernen JavaScript können Sie eine benannte Funktion verwenden und sie direkt verweisen. Für ältere IE -Versionen benötigen Sie detachEvent und das "auf" Präfix "(z. B." Onclick ").

Eine wiederverwendbare einmalige Ereignisfunktion

Erstellen Sie eine wiederverwendbare Funktion:

, um wiederholt den Entfernungscode zu schreiben:

function oneTimeEvent(node, type, callback) {
  node.addEventListener(type, function(e) {
    e.target.removeEventListener(e.type, arguments.callee);
    callback(e);
  });
}

Verwendung:

oneTimeEvent(document.getElementById("myelement"), "click", function(e) {
  alert("This message appears only once!");
});

once modernes JavaScripts Option

once: true Der modernste und sauberste Ansatz verwendet die Option addEventListener in

:

document.getElementById("myelement").addEventListener("click", function() {
  console.log("This will only run once!");
}, { once: true });

Dies wird von den meisten modernen Browsern unterstützt und vermeidet das manuelle Entfernen.

Obwohl es nicht immer notwendig ist, bietet das Verständnis dieser Techniken zum Erstellen von Einzelverwendungs-Event-Handlern wertvolle Flexibilität und Effizienz in Ihren JavaScript-Projekten. Wählen Sie die Methode aus, die am besten für die Abhängigkeiten und den Codierungsstil Ihres Projekts geeignet ist.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einmalige Ereignisse in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!