Heim > Artikel > Web-Frontend > Was ist ein JavaScript-Ereignisstrom und ein Ereignishandler im Detail erklärt?

Was ist ein JavaScript-Ereignisstrom und ein Ereignishandler im Detail erklärt?

伊谢尔伦Original: 2017-07-24 15:42:501934Durchsuche

Die Interaktion zwischen JS und HTML wird durch Ereignisse realisiert. Ereignisse sind bestimmte Interaktionsmomente, die innerhalb eines Dokuments oder Browserfensters stattfinden. Sie können Listener (oder Handler) verwenden, um Ereignisse so zu planen, dass beim Eintreten des Ereignisses der entsprechende Code ausgeführt wird. Dies ist in der traditionellen Softwareentwicklung als Observer-Muster bekannt und unterstützt eine lose Kopplung zwischen dem Verhalten der Seite und dem Erscheinungsbild der Seite.

Ereignisfluss

Der Ereignisfluss beschreibt die Reihenfolge, in der Ereignisse von der Seite empfangen werden.

Ereignis-Bubbling

Das Ereignis wird zunächst vom spezifischsten Element (dem Knoten mit der tiefsten Verschachtelungsebene im Dokument) empfangen und Anschließend werden die Ebenen nacheinander an weniger spezifische Knoten (Dokumente) weitergegeben. Nehmen Sie die folgende HTML-Seite als Beispiel. Wenn Sie auf eine Schaltfläche auf der Seite klicken, wird das „Klick“-Ereignis in der Reihenfolge < Mit anderen Worten bedeutet Ereignis-Bubbling, dass sich das Ereignis entlang des DOM-Baums vom zugrunde liegenden Element, das das Ereignis ausgelöst hat, nach oben zum Dokumentobjekt ausbreitet.

<html>
 <head>
  <title>Test</title>
 </head>
 <body>
  <button id="myBtn">A Btn</button>
 </body>
</html>

Ereigniserfassung

Im Gegensatz zur Idee des Event-Sprudelns ist die Idee der Ereigniserfassung Weniger spezifische Knoten sollten Ereignisse früher empfangen, und die spezifischsten Knoten sollten Ereignisse zuletzt empfangen. Im obigen Beispiel wird das „Klick“-Ereignis nach dem Klicken auf die Schaltfläche in der Reihenfolge „Dokument“, „Text“ und „Schaltfläche“ weitergegeben. Mit anderen Worten bedeutet Ereigniserfassung, dass sich das Ereignis vom Dokumentobjekt entlang des DOM-Baums nach unten bis zum tatsächlichen Zielelement des Ereignisses ausbreitet.

DOM-Ereignisfluss

Die durch „DOM2-Level-Ereignisse“ angegebenen Ereignisse umfassen drei Phasen: Ereigniserfassungsphase, Zielphase und Ereignisrisiko Blasenstadium. Das erste, was passiert, ist die Ereigniserfassung, die die Möglichkeit bietet, das Ereignis abzufangen. Dann empfängt das eigentliche Ziel das Ereignis. Die letzte Phase ist die Sprudelphase, in der Sie auf Ereignisse reagieren können.

Nehmen wir immer noch den vorherigen Schaltflächenklick als Beispiel: Im DOM-Ereignisfluss beginnt in der Erfassungsphase das „Klick“-Ereignis im Dokument und wird an das Körperelement weitergegeben (beachten Sie, dass das eigentliche Ziel Die Schaltfläche erhält sie im Capture-Phase-Ereignis nicht. In der Zielphase empfängt das Schaltflächenelement das Ereignis „Klick“. Schließlich wird das Ereignis in der Bubbling-Phase zurück an das Dokument weitergegeben.

Ereignishandler

Ein Ereignis ist eine bestimmte Aktion, die vom Benutzer oder vom Browser selbst ausgeführt wird, und die Funktion, die auf ein Ereignis reagiert, wird als Ereignishandler oder Ereignis bezeichnet Hörgerät.

HTML-Ereignishandler

Der HTML-Ereignishandler bezieht sich hier auf Ereignisse, die direkt in HTML-Elementen durch Attribute definiert werden, siehe Codebeispiel unten . In diesem Fall erstellt der Ereignishandler eine Funktion, die den Attributwert des Elements kapselt, und dieser Wert entspricht dem Zielelement des Ereignisses. Die Angabe von Ereignishandlern auf diese Weise hat mehrere Nachteile und wird nicht empfohlen.

<button onclick="alert(&#39;HaHa~&#39;)">Btn-1</button>
<button onclick="alert(&#39;event.type&#39;)">Btn-2</button>
<button onclick="handler()">Btn-3</button>
<script type="text/javascript">
 function handler() {
  alert("Haha~");
 }
</script>

DOM-Level-0-Ereignishandler

Die traditionelle Art, Ereignishandler über JS anzugeben Weisen Sie einfach einer Event-Handler-Eigenschaft eine Funktion zu, siehe Codebeispiel unten. Auf diese Weise angegebene Event-Handler werden im Gültigkeitsbereich des Elements ausgeführt, wobei sich dies auf das aktuelle Element bezieht. Auf diese Weise hinzugefügte Ereignishandler werden während der Bubbling-Phase des Ereignisflusses verarbeitet. Wenn Sie das Ereignis löschen möchten, setzen Sie einfach den Wert von onclick auf empty.

var btn = document.getElementById("myBtn");
btn.onclick = function() {
 console.log("this.id"); // "myBtn"
};
// 删除事件处理程序
btn.onclick = null;

Ereignishandler auf DOM2-Ebene

„Ereignis auf DOM2-Ebene“ definiert zwei Methoden zur Angabe und Entfernen der Event-Handler addEventListener() und removeEventListener(). Diese beiden Methoden sind in allen DOM-Knoten enthalten. Beide Methoden erhalten 3 Parameter, das zu verarbeitende Ereignis, die Verarbeitungsfunktion und den booleschen Wert. Der letzte boolesche Wert ist „true“, um den Ereignishandler während der Erfassungsphase aufzurufen, und „false“, um den Ereignishandler während der Bubbling-Phase aufzurufen. Wie die Methoden auf DOM0-Ebene wird auch der hier hinzugefügte Ereignishandler im Gültigkeitsbereich des Elements ausgeführt, an das er angehängt ist. Der Vorteil des Hinzufügens von Ereignishandlern mithilfe der Methode auf DOM2-Ebene besteht darin, dass mehrere Ereignishandler hinzugefügt werden können. Diese Ereignishandler werden in der Reihenfolge ausgelöst, in der sie hinzugefügt wurden. Das Folgende ist ein Codebeispiel:

var btn = document.getElementById("myBtn");
// 添加，触发点击事件时先输出"myBtn"再输出"HaHa~"
btn.addEventListener("click", function() {
 console.log(this.id);
}, false);
btn.addEventListener("click", function() {
 console.log("HaHa~");
}, false);

Ereignisse, die über addEventListener() hinzugefügt wurden, können nur über removeEventListener() entfernt werden. Die beim Löschen übergebenen Parameter sollten mit den beim Hinzufügen verwendeten Parametern übereinstimmen. Dies bedeutet auch, dass die über addEventListener() hinzugefügte anonyme Funktion nicht gelöscht werden kann, da die beim Hinzufügen übergebene anonyme Funktion nicht an removeEventListener() übergeben werden kann. Auch wenn beim Löschen eine identische Funktion geschrieben wird, ist diese Funktion nur eine neue anonyme Funktion. Bitte sehen Sie sich das folgende Codebeispiel an:

var btn = document.getElementById("myBtn");
// 无法删除匿名函数
btn.addEventListener("click", function() {
 console.log(this.id);
}, false);
btn.removeEventListener("click", function() {
 console.log(this.id);
}, false);

// 正确的添加和删除方式
function handler() {
 console.log(this.id);
}
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);

大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。最好只在需要在事件到达目标之前截获它的时候才将事件处理程序添加到捕获阶段。JS高级程序设计上给出的建议是，如果不是特别需要，不建议在事件捕获阶段注册事件处理程序。

IE事件处理程序

IE实现了与DOM中类似的两个方法: attachEvent()和deleteEvent()。这两个方法接收两个参数，事件处理程序名称和事件处理程序。注意，第一个参数是事件处理程序名称而不是事件名称，也就是说在注册点击事件的处理程序时应该传入”onclick”而不是”click”，这里跟DOM的方法有些差别。另外，这两个方法注册的事件处理程序是在全局作用域中运行而不是元素作用域，this的值指向window。还有一点需要特别小心，通过attachEvent()方法也可以添加多个事件处理程序，但是它们的执行顺序却不是按照它们被添加的顺序，而是完全相反，跟DOM方法截然不同。突然觉得IE真的特别反人类~~~下面是代码示例：

var btn = document.getElementById("myBtn");
function handler1() { // ... }
function handler2() { // ... }
// 添加，触发点击事件时先执行handler2再执行handler1
btn.attachEvent("onclick", handler1);
btn.attachEvent("onclick", handler2);
// 删除
btn.deleteEvent("onclick", handler1);
btn.deleteEvent("onclick", handler2);

Das obige ist der detaillierte Inhalt vonWas ist ein JavaScript-Ereignisstrom und ein Ereignishandler im Detail erklärt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Einführung in die Paginierung des Bootstrap-Tabellen-Plug-InsNächster Artikel：Einführung in die Paginierung des Bootstrap-Tabellen-Plug-Ins

In Verbindung stehende Artikel

Mehr sehen