Die JS-Methoden addEventListener() und attachEvent() implementieren Registrierungsereignisse

Im DOM-Ereignismodell von JavaScript werden Ereignisse durch Aufrufen der Methode addEventListener() eines Objekts registriert. Die Verwendung ist wie folgt:
element.addEventListener(String-Typ, Funktionslistener, Boolescher Wert useCaptrue);

Die Parameter werden wie folgt beschrieben:

• Typ: Der Typname des registrierten Ereignisses. Ereignistypen unterscheiden sich von Ereignisattributen. Ereignistypnamen haben nicht das Präfix „on“. Beispielsweise ist für das Ereignisattribut „onclick“ der entsprechende Ereignistyp „click“.
• Listener: Abhörfunktion, d. h. Ereignisverarbeitungsfunktion. Diese Funktion wird aufgerufen, wenn ein Ereignis des angegebenen Typs eintritt. Wenn diese Funktion aufgerufen wird, ist das einzige Argument, das ihr standardmäßig übergeben wird, das Ereignisobjekt.
• useCaptrue: ist ein Boolescher Wert. Wenn der Wert wahr ist, wird der angegebene Ereignishandler während der Erfassungsphase der Ereignisausbreitung ausgelöst. Wenn der Wert falsch ist, wird der Ereignishandler während der Bubbling-Phase ausgelöst.

Beispiel 1

Das folgende Beispiel verwendet addEventListener(), um Klickereignisse für alle Schaltflächen zu registrieren. Rufen Sie zuerst die Methode getElementsByTagName() des Dokuments auf, um alle Schaltflächenobjekte zu erfassen. Verwenden Sie dann die for-Anweisung, um den Schaltflächensatz (btn) zu durchlaufen, und registrieren Sie mit der Methode addEventListener() für jede Schaltfläche eine Ereignisfunktion, um den vom aktuellen Objekt angezeigten Text abzurufen.

<button id="btn1" onclick="btn1();">Schaltfläche 1</button>
<button id="btn2" onclick="btn2(event);">Schaltfläche 2</button>
<Skript>
  var btn = document.getElementsByTagName("button"); //Alle Schaltflächen erfassen for(var i in btn){ //Die Schaltflächensammlung durchlaufen btn[i].addEventListener("click", function(){
    Alarm (dieses.innerHTML);
  }, true); //Registriere eine Ereignisbehandlungsfunktion für jedes Schaltflächenobjekt und definiere die Antwort in der Erfassungsphase}
</Skript> 

Zeigen Sie eine Vorschau im Browser an und klicken Sie auf verschiedene Schaltflächen. Der Browser zeigt automatisch den Schaltflächennamen an. Der Effekt ist in der Abbildung dargestellt:

Verwenden Sie die Methode addEventListener(), um dieselbe Ereignisbehandlungsfunktion für mehrere Objekte oder mehrere Ereignisbehandlungsfunktionen für dasselbe Objekt zu registrieren. Das Registrieren mehrerer Ereignishandler für dasselbe Objekt ist für die modulare Entwicklung sehr nützlich.

Beispiel 2

Im folgenden Beispiel werden zwei Ereignisse für Absatztext registriert: Mouseover und Mouseout. Wenn der Cursor über den Absatztext bewegt wird, wird er mit einem blauen Hintergrund angezeigt. Wenn der Cursor aus dem Absatztext herausbewegt wird, wird er automatisch mit einem roten Hintergrund angezeigt. Auf diese Weise ist es nicht erforderlich, die Dokumentstruktur zu zerstören und dem Absatztext mehrere Ereignisattribute hinzuzufügen.

<p id="p1">Mehrere Ereignisse für ein Objekt registrieren</p>
<Skript>
  var p1 = document.getElementById("p1"); //Erfassen Sie den Handle des Absatzelements p1.addEventListener("mouseover", function () {
    dieser.Stil.Hintergrund = "blau";
  }, true); //Registriere den ersten Eventhandler für das Absatzelement p1.addEventListener("mouseout", function () {
    dieser.Stil.Hintergrund = "blau";
  }, true); //Registriere den zweiten Eventhandler für das Absatzelement</script>

Das IE-Ereignismodell verwendet die Methode attachEvent(), um Ereignisse zu registrieren. Die Verwendung ist wie folgt:

element.attachEvent(etype, Ereignisname)

Die Parameterliste lautet wie folgt:

• etype: Legen Sie den Ereignistyp fest, z. B. onclick, onkeyup, onmousemove usw.
• eventName: Legen Sie den Ereignisnamen fest, der die Ereignisverarbeitungsfunktion darstellt.

Beispiel 3

Im folgenden Beispiel werden für das Absatz-Tag <p> zwei Ereignisse registriert: mouseover und mouseout. Wenn der Cursor vorbeigeht, ist die Hintergrundfarbe des Absatztextes blau, und wenn der Cursor weggeht, ist die Hintergrundfarbe rot.

<p id="p1">Mehrere Ereignisse für ein Objekt registrieren</p>
<Skript>
  var p1 = document.getElementById("p1"); //Absatzelement erfassen p1.attachEvent("onmouseover", function () {
    dieser.Stil.Hintergrund = "blau";
  }); //Mouseover-Ereignis registrieren p1.attachEvent("onmouseout", function () {
    dieser.Stil.Hintergrund = "rot";
  }); //Mouseout-Ereignis registrieren</script>

Wenn attachEvent() zum Registrieren eines Ereignisses verwendet wird, ist das aufrufende Objekt der Ereignisverarbeitungsfunktion nicht mehr das aktuelle Ereignisobjekt selbst, sondern das Fensterobjekt. Daher zeigt this in der Ereignisfunktion auf das Fenster und nicht auf das aktuelle Objekt. Wenn Sie das aktuelle Objekt abrufen möchten, sollten Sie das srcElement-Attribut des Ereignisses verwenden.

Der erste Parameter der Methode attachEvent () im IE-Ereignismodell ist der Name des Ereignistyps, dem das Präfix on vorangestellt werden muss. Bei Verwendung der Methode addEventListener () ist das Präfix on nicht erforderlich, z. B. bei click.

Dies ist das Ende dieses Artikels über die JS-Methoden addEventListener() und attachEvent() zum Implementieren von Registrierungsereignissen. Weitere verwandte Inhalte zu JS addEventListener() und attachEvent() finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!