suchen

Heim  >  Artikel  >  Web-Frontend  >  Erfahren Sie mehr über JavaScript-Ereignisströme und Event-Handler_Javascript-Tipps

Erfahren Sie mehr über JavaScript-Ereignisströme und Event-Handler_Javascript-Tipps

WBOY
WBOYOriginal
2016-05-16 15:18:221081Durchsuche

In diesem Artikel werden der gesamte JavaScript-Ereignisfluss und der Ereignishandler vorgestellt und als Referenz für Sie bereitgestellt. Der spezifische Inhalt lautet wie folgt:

1. Ereignisablauf

Der Ereignisfluss beschreibt die Abfolge der von der Seite empfangenen Ereignisse. Der Ereignisfluss von IE ist ein Event-Bubbling-Flow, während der Ereignisfluss von Netscape Communicator ein Ereigniserfassungsfluss ist.

2. Event-Sprudeln

Das heißt, das Ereignis wird zunächst vom spezifischsten Element empfangen und breitet sich dann nach oben zu weniger spezifischen Knoten aus. Zum Beispiel: 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
</head>
<body>
 <div>Click</div>
</body>
</html>

Wenn auf das div-Element auf der Seite geklickt wird, wird das Klickereignis in der folgenden Reihenfolge weitergegeben:

  • div-Element
  • Körperelement
  • HTML-Element
  • Dokumentobjekt

3. Ereigniserfassung

Die Idee der Ereigniserfassung besteht darin, dass der spezifischste Knoten das Ereignis zuletzt empfangen sollte. Der Zweck der Ereigniserfassung besteht darin, das Ereignis zu erfassen, bevor es das Ziel erreicht.

Wenn auf das div-Element auf der Seite geklickt wird, wird das Klickereignis in der folgenden Reihenfolge weitergegeben:

  • Dokumentobjekt
  • HTML-Tag
  • Body-Tag
  • div-Tag

Obwohl die Spezifikation erfordert, dass Ereignisse vom Dokumentobjekt weitergegeben werden, beginnen Browser im Allgemeinen mit der Erfassung von Ereignissen vom Fensterobjekt. Da ältere Browserversionen dies nicht unterstützen, wird im Allgemeinen das Event-Bubbling verwendet.

4. DOM-Ereignisfluss

Der durch „DOM2-Level-Ereignisse“ angegebene Ereignisfluss umfasst drei Phasen: Ereigniserfassungsphase, Zielphase und Ereignisblasenphase .

Im DOM-Ereignisstrom empfängt das eigentliche Ziel während der Erfassungsphase keine Ereignisse. Das heißt, während der Erfassungsphase stoppt das Ereignis, nachdem es vom Dokument in den HTML-Code und dann in den Textkörper übergegangen ist. Die nächste Phase ist die Phase „am Ziel“, in der das Ereignis innerhalb des Div auftritt und als Teil der Bubbling-Phase bei der Ereignisbehandlung betrachtet wird. Dann kommt es zur Blasenbildungsphase. IE8 und frühere Versionen unterstützen kein DOM-Ereignis-Streaming. Der Browser löst während der Erfassungsphase Ereignisse für das Ereignisobjekt aus. Das Ergebnis ist, dass es zwei Möglichkeiten gibt, Ereignisse für das Zielobjekt auszuführen.

5. Ereignishandler

Ein Ereignis ist eine bestimmte Aktion, die vom Benutzer oder vom Browser selbst ausgeführt wird. Ein Ereignishandler (oder Ereignis-Listener) ist eine Funktion, die auf ein Ereignis reagiert. Der Name des Event-Handlers beginnt mit „on“, z. B. onload, onclick usw.

6. HTML-Ereignishandler

Um beim Klicken auf die Schaltfläche einen JS-Code auszuführen, können Sie ihn wie folgt schreiben: 

<div onclick="alert('Clicked')">Click</div>

Hinweis: HTML-Syntaxzeichen ohne Escapezeichen können darin nicht verwendet werden.

Sie können auch an anderer Stelle auf der Seite definierte Skripte aufrufen: 

<script>
 function showMessage () {
  document.write("fdas");
 }
</script>
<input type="button" value="Click Me" onclick="showMessage()" />

Der Code im Ereignishandler hat bei seiner Ausführung Zugriff auf jeden Code im globalen Bereich.

Dadurch wird eine Funktion erstellt, die den Elementattributwert kapselt. Diese Funktion verfügt über eine lokale Variable event, bei der es sich um das Ereignisobjekt handelt: 

<input type="button" value="Click Me" onclick="alert(event.type)" />

Wobei der Wert davon dem Zielelement des Ereignisses entspricht, wie zum Beispiel: 

<input type="button" value="Click Me" onclick="alert(this.value)" />

Es gibt viele Probleme mit HTML-Ereignishandlern, daher sollten durch js angegebene Ereignishandler verwendet werden

7. DOM-Level-0-Ereignishandler

Um mit js einen Event-Handler anzugeben, müssen Sie zunächst einen Verweis auf das Objekt abrufen, das bearbeitet werden soll.

Jedes Element hat seine eigenen Event-Handler-Attribute, die normalerweise alle in Kleinbuchstaben geschrieben sind, wie zum Beispiel onclick. Zum Beispiel: 

<input type="button" value="Click Me" id="btn" />
<script>
document.querySelector("#btn").onclick = function() {
 console.log("hello");
}
</script>

Ereignishandler, die mit Methoden der DOM-Ebene 0 angegeben werden, gelten als Methoden des Elements. Daher wird der Ereignishandler zu diesem Zeitpunkt im Gültigkeitsbereich des Elements ausgeführt, d. h., dies bezieht sich auf das aktuelle Element: 

<input type="button" value="Click Me" id="btn" />
<script>
document.querySelector("#btn").onclick = function() {
 console.log(this.type);
}
</script>

Auf diese Weise hinzugefügte Ereignishandler werden während der Bubbling-Phase des Ereignisflusses verarbeitet.

Ereignishandler entfernen, die über Methoden der DOM-Ebene 0 angegeben wurden: 

btn.onclick = null;

8. Ereignishandler auf DOM2-Ebene

addEventListener()

Diese Methode empfängt drei Parameter: den zu verarbeitenden Ereignisnamen, die Ereignishandlerfunktion und einen booleschen Wert. Wenn der boolesche Wert wahr ist, bedeutet dies, dass der Ereignishandler in der Erfassungsphase aufgerufen wird Aufrufen des Ereignisses im Bubbling-Stage-Handler. Zum Beispiel: 

var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
 console.log(this.id);
})

Sie können der Schaltfläche auch mehrere Ereignishandler hinzufügen, z. B.: 

var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
  console.log(this.id);
})
btn.addEventListener("click", function () {
  console.log(this.value);
})

removeEventListener()

var btn = document.getElementById("btn");
function info () {
  console.log(this.value);
}
btn.addEventListener("click", info);
btn.addEventListener("click", function () {
  console.log(this.id);
});
btn.addEventListener("click", function valueAndId () {
  console.log(this.value + " " + this.id);
});
btn.removeEventListener("click", info); //有效
btn.removeEventListener("click", function () {
  console.log(this.id);
}); //无效
btn.removeEventListener("click", valueAndId); //报错无效

Dalam kebanyakan kes, pengendali acara ditambahkan pada fasa menggelegak aliran acara untuk memaksimumkan keserasian dengan pelbagai penyemak imbas.

Perkara di atas adalah mengenai strim acara JavaScript dan pengendali acara saya harap ia akan membantu pembelajaran semua orang.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ausführliche Erläuterung der gegenseitigen Konvertierung zwischen Zeichenfolgen und Arrays in js_javascript-KenntnissenNächster Artikel：Ausführliche Erläuterung der gegenseitigen Konvertierung zwischen Zeichenfolgen und Arrays in js_javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen