Web-Frontend
js-Tutorial
Was ist ein JavaScript-Ereignisstrom und ein Ereignishandler im Detail erklärt?
Was ist ein JavaScript-Ereignisstrom und ein Ereignishandler im Detail erklärt?
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('HaHa~')">Btn-1</button>
<button onclick="alert('event.type')">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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Der Betriebsprozess des WIN10-Diensthosts belegt zu viel CPU
Mar 27, 2024 pm 02:41 PM
1. Zuerst klicken wir mit der rechten Maustaste auf die leere Stelle der Taskleiste und wählen die Option [Task-Manager] oder klicken mit der rechten Maustaste auf das Startlogo und wählen dann die Option [Task-Manager]. 2. In der geöffneten Task-Manager-Oberfläche klicken wir ganz rechts auf die Registerkarte [Dienste]. 3. Klicken Sie in der geöffneten Registerkarte [Dienst] unten auf die Option [Dienst öffnen]. 4. Klicken Sie im sich öffnenden Fenster [Dienste] mit der rechten Maustaste auf den Dienst [InternetConnectionSharing(ICS)] und wählen Sie dann die Option [Eigenschaften]. 5. Ändern Sie im sich öffnenden Eigenschaftenfenster die Option „Öffnen mit“ in „Deaktiviert“, klicken Sie auf „Übernehmen“ und dann auf „OK“. 6. Klicken Sie auf das Startlogo, dann auf die Schaltfläche zum Herunterfahren, wählen Sie [Neustart] und schließen Sie den Neustart des Computers ab.
Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung
Apr 03, 2024 am 11:55 AM
Die Technologie zur Gesichtserkennung und -erkennung ist bereits eine relativ ausgereifte und weit verbreitete Technologie. Derzeit ist JS die am weitesten verbreitete Internetanwendungssprache. Die Implementierung der Gesichtserkennung und -erkennung im Web-Frontend hat im Vergleich zur Back-End-Gesichtserkennung Vor- und Nachteile. Zu den Vorteilen gehören die Reduzierung der Netzwerkinteraktion und die Echtzeiterkennung, was die Wartezeit des Benutzers erheblich verkürzt und das Benutzererlebnis verbessert. Die Nachteile sind: Es ist durch die Größe des Modells begrenzt und auch die Genauigkeit ist begrenzt. Wie implementiert man mit js die Gesichtserkennung im Web? Um die Gesichtserkennung im Web zu implementieren, müssen Sie mit verwandten Programmiersprachen und -technologien wie JavaScript, HTML, CSS, WebRTC usw. vertraut sein. Gleichzeitig müssen Sie auch relevante Technologien für Computer Vision und künstliche Intelligenz beherrschen. Dies ist aufgrund des Designs der Webseite erwähnenswert
Eine Kurzanleitung zur CSV-Dateibearbeitung
Dec 26, 2023 pm 02:23 PM
Lernen Sie schnell, wie Sie Dateien im CSV-Format öffnen und verarbeiten. Mit der kontinuierlichen Weiterentwicklung der Datenanalyse und -verarbeitung ist das CSV-Format zu einem der am weitesten verbreiteten Dateiformate geworden. Eine CSV-Datei ist eine einfache und leicht lesbare Textdatei mit verschiedenen, durch Kommas getrennten Datenfeldern. Ob in der akademischen Forschung, in der Geschäftsanalyse oder in der Datenverarbeitung – wir stoßen häufig auf Situationen, in denen wir CSV-Dateien öffnen und verarbeiten müssen. Die folgende Anleitung zeigt Ihnen, wie Sie schnell lernen, Dateien im CSV-Format zu öffnen und zu verarbeiten. Schritt 1: Verstehen Sie zunächst das CSV-Dateiformat.
Erfahren Sie, wie Sie mit Sonderzeichen umgehen und einfache Anführungszeichen in PHP konvertieren
Mar 27, 2024 pm 12:39 PM
Im PHP-Entwicklungsprozess ist der Umgang mit Sonderzeichen ein häufiges Problem, insbesondere bei der Zeichenfolgenverarbeitung werden Sonderzeichen häufig mit Escapezeichen versehen. Unter diesen ist die Umwandlung von Sonderzeichen in einfache Anführungszeichen eine relativ häufige Anforderung, da einfache Anführungszeichen in PHP eine gängige Methode zum Umschließen von Zeichenfolgen sind. In diesem Artikel erklären wir, wie man in PHP mit einfachen Anführungszeichen bei der Konvertierung von Sonderzeichen umgeht, und stellen spezifische Codebeispiele bereit. Zu den Sonderzeichen in PHP gehören unter anderem einfache Anführungszeichen ('), doppelte Anführungszeichen ("), Backslash () usw. In Zeichenfolgen
PHP- und JS-Entwicklungstipps: Beherrschen Sie die Methode zum Zeichnen von Aktienkerzendiagrammen
Dec 18, 2023 pm 03:39 PM
Mit der rasanten Entwicklung der Internetfinanzierung sind Aktieninvestitionen für immer mehr Menschen zur Wahl geworden. Im Aktienhandel sind Kerzendiagramme eine häufig verwendete Methode der technischen Analyse. Sie können den sich ändernden Trend der Aktienkurse anzeigen und Anlegern helfen, genauere Entscheidungen zu treffen. In diesem Artikel werden die Entwicklungskompetenzen von PHP und JS vorgestellt, der Leser wird zum Verständnis des Zeichnens von Aktienkerzendiagrammen geführt und es werden spezifische Codebeispiele bereitgestellt. 1. Aktien-Kerzendiagramme verstehen Bevor wir uns mit dem Zeichnen von Aktien-Kerzendiagrammen befassen, müssen wir zunächst verstehen, was ein Kerzendiagramm ist. Candlestick-Charts wurden von den Japanern entwickelt
Wie kann das Problem gelöst werden, nachdem das Upgrade von Win7 auf Win10 fehlgeschlagen ist?
Dec 26, 2023 pm 07:49 PM
Wenn das von uns verwendete Betriebssystem Win7 ist, können einige Freunde beim Upgrade möglicherweise kein Upgrade von Win7 auf Win10 durchführen. Der Herausgeber meint, wir könnten es noch einmal mit einem Upgrade versuchen, um zu sehen, ob das Problem dadurch gelöst werden kann. Schauen wir uns an, was der Editor getan hat, um Einzelheiten zu erfahren. Was zu tun ist, wenn das Upgrade von Win7 auf Win10 fehlschlägt: 1. Es wird empfohlen, zuerst einen Treiber herunterzuladen, um zu prüfen, ob Ihr Computer auf Win10 aktualisiert werden kann Verwenden Sie nach dem Upgrade den Treibertest. Überprüfen Sie, ob Treiberanomalien vorliegen, und beheben Sie diese dann mit einem Klick. Methode 2: 1. Löschen Sie alle Dateien unter C:\Windows\SoftwareDistribution\Download. 2.win+R führen Sie „wuauclt.e“ aus
Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode
Jan 05, 2024 pm 06:08 PM
JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest
Die Beziehung zwischen js und vue
Mar 11, 2024 pm 05:21 PM
Die Beziehung zwischen js und vue: 1. JS als Eckpfeiler der Webentwicklung; 2. Der Aufstieg von Vue.js als Front-End-Framework; 3. Die komplementäre Beziehung zwischen JS und Vue; Vue.
