JavaScript ' this ' und Event -Handler

JavaScript -Ereignisverarbeitung: Ein tiefes Verständnis von this Schlüsselwörtern und Ereignisverarbeitungsmechanismus

effiziente Client -Webanwendungen können nicht vom JavaScript -Ereignisbehandlungsmechanismus getrennt werden. Mit Ereignissen ermöglichen es JavaScript, das Benutzerverhalten zu erkennen, z. B. Mausschwebede, Klicken auf Links, Scrollen, Fensteränderung, Ziehen von Objekten usw. Ihr JavaScript -Code kann einen Ereignishandler registrieren, der nach einem bestimmten Ereignis auslöst. Die meisten Browser übergeben ein einzelnes Objekt, das Ereignisinformationen an die Funktion enthält, z. B. Schlüsselinformationen, Maus -Cursorposition usw. Sie können dann bestimmte Aktionen wie Animationselemente ausführen, eine AJAX -Anfrage initiieren oder das Standardverhalten des Browsers blockieren. Darüber hinaus kann das Schlüsselwort this auch festgelegt werden. Normalerweise verweist this auf das Element, das das Ereignis auslöst, aber nicht immer.

Vermeiden Sie die Verwendung von Inline -Ereignishandlern

Inline -Ereignishandler (z. B. <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" onclick="EventHandler();">click me</a>) 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.

herkömmliches DOM0 -Ereignis

Obwohl herkömmliche Ereignisbearbeitungsmethoden (z. B. link.onclick = EventHandler;) einfach und direkt sind, kann nur ein Handler pro Ereignisart zugewiesen werden. HINWEIS: Verwenden Sie nicht link.onclick = EventHandler();, damit die EventHandler -Funktion sofort ausführt und dem Rückgabewert (undfiniert) dem Attribut https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15blink des onclick Knotens zuweisen. Dies meldet keinen Fehler, aber Ihr Handler wird niemals aufgerufen, wenn das Klickereignis auftritt.

modernes DOM2 -Ereignis

Mit

moderne Ereignisverarbeitung können mehrere Handler für das gleiche Ereignis angegeben werden. Aufgrund einiger Unterschiede in der Implementierung zwischen Microsoft und W3C unterstützt 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);

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

Ähnlich wie beim DOM0 -Ereignis setzen alle Browser this auf das Element, das das Ereignis auslöst ... außer IE8 und unten. In IE8 und unten ist this immer ein globales window Objekt. Glücklicherweise können wir das Zielelement aus dem Ereignisobjekt bestimmen:

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

Die Bedeutung des Schlüsselworts this im JavaScript -Ereignishandler

this Schlüsselwort bezieht sich auf den Kontext, in dem die Funktion aufgerufen wird. In einem Ereignishandler weist this normalerweise auf das HTML -Element hin, das den Ereignishandler anhält. Auf diese Weise können Sie direkt auf Elemente zugreifen und manipulieren.

wie man this im Ereignishandler

verwendet this Die Verwendung von this ist einfach, genau wie die Verwendung anderer Variablen. Denken Sie daran,

zeigt auf das HTML -Element, das den Ereignishandler angeschlossen hat.

Verschiedene Ereignistypen in JavaScript

click JavaScript unterstützt mehrere Ereignisse wie mouseover, mouseout, keydown, keyup, load, unload,

,

, und .

addEventListener wie man einen Ereignishandler an ein Element

anschließt Der Ereignishandler kann unter Verwendung der -Methode an ein Element angehängt werden. 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 Event -Handler -Funktionen auf Ereignisobjekte zugreifen.

Das obige ist der detaillierte Inhalt vonJavaScript ' this ' und Event -Handler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!