JavaScript Ereignisverarbeitung: Ein tiefes Verständnis von this Schlüsselwort und Ereignisverarbeitungsmechanismus

Effiziente Client -Webanwendungen können nicht vom JavaScript -Ereignisverarbeitungsmechanismus getrennt werden. Mit Ereignissen ermöglichen es JavaScript, das Benutzerverhalten wie Mausschwebede zu erkennen, auf Links zu klicken, das Scrollen von Seiten, das Ändern der Fenster, das Ziehen von Objekten usw. Ihr JavaScript -Code kann einen Ereignishandler registrieren, der beim Auftreten eines bestimmten Ereignisses ausgelöst wird. Die meisten Browser übergeben ein einzelnes Objekt, das Ereignisinformationen an die Funktion enthält, wie z. B. wichtige Informationen, Maus -Cursorposition usw. Sie können dann bestimmte Aktionen wie Animationselemente ausführen, eine AJAX -Anforderung initiieren oder das Standardverhalten des Browsers blockieren. Außerdem kann das Schlüsselwort dieses auch festgelegt werden. Typischerweise zeigt dies auf das Element, das das Ereignis auslöst, aber es ist nicht immer der Fall.

vermeiden Sie die Verwendung von Inline -Ereignishandler

]

Inline -Ereignishandler (z. B. klicken Sie mich ] sind einfach, haben aber viele Nachteile: Sie sind sehr restriktiv, ungeschickt und können HTML -Code aufblähen. Da Ereignisanrufe und Handler an verschiedenen Orten definiert sind, ist es kompliziert, dies zu warten. Da Ereignisse aufgerufen werden können, wenn die Seite geladen wird, müssen die Skript -Tags oben in der HTML platziert werden, nicht unten.

traditional dom0 event ]

traditionelle Ereignisbearbeitungsmethoden (z. HINWEIS: Verwenden Sie nicht

link.onclick = eventHandler (); , dies wird die Funktion EventHandler sofort ausführen und den Rückgabewert (undefiniert) dem Onclick Attribut der link nod. Dies meldet keinen Fehler, aber Ihr Handler wird niemals aufgerufen, wenn das Klickereignis auftritt. moderne dom2 events

] Die moderne Ereignisverarbeitung ermöglicht es, dass mehrere Handler für dasselbe Ereignis angegeben werden. Aufgrund einiger Unterschiede in der Implementierung zwischen Microsoft und W3C ist jedoch nur IE9 und über Unterstützung addEventListener ()

. Wir können die Objekterkennung verwenden, um ein Cross-Browser-Ereignis zusätzliche Funktion zu erstellen:

attachEvent (link, "click", EventHandler); Funktion attackEvent (Element, Typ, Handler) { if (element.adDeVentListener) element.adDeVentListener (Typ, Handler, Falsch); sonst element.attachEvent ("on" Typ, Handler); }

Ähnlich wie beim DOM0 -Ereignis setze alle Browser

AttachEvent(link, "click", EventHandler);

function AttachEvent(element, type, handler) {
  if (element.addEventListener) element.addEventListener(type, handler, false);
  else element.attachEvent("on"   type, handler);
}

als das Element, das das Ereignis auslöst ... außer IE8 und unten. In IE8 und unten ist

dies immer ein globales Objekt Fenster . Glücklicherweise können wir das Zielelement aus dem Ereignisobjekt bestimmen: Funktion EventHandler (e) { e = e || Fenster.Event; var target = e.target || e.srcelement; console.log (Ziel); }

function EventHandler(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;
  console.log(target);
}

this

in Javascript Ereignishandler ] this

Schlüsselwort bezieht sich auf den Kontext, in dem die Funktion aufgerufen wird. In einem Ereignishandler zeigt

dies normalerweise auf das HTML -Element, das den Ereignishandler angeschlossen hat. Auf diese Weise können Sie direkt auf Elemente zugreifen und manipulieren. wie man

this

im Ereignishandler verwendet verwendet this

ist einfach, genau wie andere Variablen. Denken Sie daran,

dies zeigt auf das HTML -Element des angehängten Ereignishandlers. Verschiedene Ereignisstypen in javaScript

JavaScript supports multiple events such as click

,

mouseover, mouseout, keydown, keyup, load and unload. wie man einen Ereignishandler einem Element anhängt

Sie können einen Ereignishandler einem Element mit der addEventListener

Methode anhängen. Diese Methode akzeptiert zwei Parameter: den Namen des zu hörenen Ereignisses und die Funktion, die beim Auftreten des Ereignisses ausgeführt wird.

Ereignisobjekt in javaScript

Ereignisobjekt ist ein spezielles Objekt, das beim Auftreten eines Ereignisses erstellt wurde. Dieses Objekt enthält Informationen zu Ereignissen wie Ereignistyp, Zielelement, Ereignisvorkommenszeit usw. Sie können in Ereignishandlerfunktionen auf Ereignisobjekte zugreifen.