Was ist ein Ereignisstrom in JavaScript?
In js ist der Ereignisfluss die Reihenfolge, in der Ereignisse zwischen dem Zielelement und den Vorgängerelementen ausgelöst werden. Entsprechend der Reihenfolge der Ereignisweitergabe können Ereignisströme in zwei Typen unterteilt werden: 1. Ereignisströme vom Typ „Blase“, bei denen Ereignisse vom spezifischsten Ereignisziel zum am wenigsten spezifischen Ereignisziel weitergegeben werden. 2. Ereignisströme vom Typ „Capture“. , bei dem Ereignisse vom am wenigsten spezifischen Ereignisziel zum spezifischsten Ereignisziel weitergegeben werden.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.
Was ist ein Ereignis?
Ein Ereignis ist ein bestimmter Moment der Interaktion, der in einem Dokument oder Browserfenster auftritt.
Ein Ereignis ist eine bestimmte Aktion, die vom Benutzer oder vom Browser selbst ausgeführt wird, z. B. Klicken, Laden und Mouseover sind die Namen von Ereignissen.
Events sind die Brücke zwischen JavaScript und DOM.
Wenn Sie es auslösen, werde ich es ausführen – wenn das Ereignis eintritt, wird seine Handler-Funktion aufgerufen, um den entsprechenden JavaScript-Code auszuführen und eine Antwort zu geben.
Typische Beispiele sind: Das Ladeereignis wird ausgelöst, wenn die Seite geladen wird; das Klickereignis wird ausgelöst, wenn der Benutzer auf ein Element klickt.
Was ist Ereignisfluss?
Wenn ein bestimmtes Ereignis für ein Element auf der Seite ausgelöst wird, z. B. ein Klick, lösen zusätzlich zum angeklickten Zielelement alle Vorgängerelemente das Ereignis aus, alle Weg zum Fenster.
Dann stellt sich die Frage, ob das Ereignis zuerst auf dem Zielelement oder zuerst auf dem Vorgängerelement ausgelöst werden soll. Das ist das Konzept des Ereignisflusses.
Der Ereignisfluss ist die Reihenfolge, in der Ereignisse stattfinden wird zwischen dem Zielelement und dem Vorgängerelement ausgelöst.
Der frühe IE und Netscape schlugen völlig gegensätzliche Ereignisflusskonzepte vor, während der Ereignisfluss von Netscape die Ereigniserfassung ist.
Zwei Ereignisflussmodelle
Die Reihenfolge der Ereignisausbreitung entspricht den beiden Ereignisflussmodellen des Browsers: erfassender Ereignisfluss und sprudelnder Ereignisfluss.
Sprudelnder Ereignisfluss: Die Ausbreitung von Ereignissen erfolgt vom spezifischsten Ereignisziel zum am wenigsten spezifischen Ereignisziel . Das heißt, von den Blättern des DOM-Baums bis zur Wurzel. 【Empfehlung】
Ereignisfluss erfassen: Die Ausbreitung von Ereignissen erfolgt vom am wenigsten spezifischenEreignisziel bis zum spezifischsten Veranstaltungsziel. Das heißt, von der Wurzel des DOM-Baums bis zu den Blättern.
Die Idee der Ereigniserfassung besteht darin, dass weniger spezifische Knoten Ereignisse früher und die spezifischsten Knoten Ereignisse zuletzt empfangen sollten.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="myDiv">Click me!</div>
</body>
</html>Im obigen HTML-Code wird auf das
-Element auf der Seite geklickt
Im sprudelnden Ereignisstrom ist die Reihenfolge der Klickereignisweitergabe – 》 —》—》document
Im Erfassungsereignisstream ist die Reihenfolge der Klickereignisweitergabe document—》—》—》 < p>
Hinweis:
1), alle modernen Browser unterstützen Event-Bubbling, es gibt jedoch geringfügige Unterschiede in der spezifischen Implementierung:
Event-Bubbling in IE5.5 und früheren Versionen Bubble überspringt das -Element (springt direkt vom Text zum Dokument).
IE9, Firefox, Chrome und Safari blasen das Ereignis bis zum Fensterobjekt.
2), IE9, Firefox, Chrome, Opera und Safari unterstützen alle die Ereigniserfassung. Obwohl der DOM-Standard erfordert, dass Ereignisse vom Dokumentobjekt weitergegeben werden, erfassen diese Browser Ereignisse vom Fensterobjekt.
3) Da alte Browserversionen dies nicht unterstützen, nutzen nur wenige Menschen die Ereigniserfassung. Es wird empfohlen, Event-Bubbling zu verwenden.
2), DOM-Ereignisfluss
DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象，从document对象开始，也在document对象结束。
DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
- 事件捕获阶段：实际目标（
）在捕获阶段不会接收事件。也就是在捕获阶段，事件从document到再到
就停止了。上图中为1~3. - 处于目标阶段：事件在
上发生并处理。但是事件处理会被看成是冒泡阶段的一部分。
- 冒泡阶段：事件又传播回文档。
note:
1）、尽管“DOM2级事件”标准规范明确规定事件捕获阶段不会涉及事件目标，但是在IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果，就是有两次机会在目标对象上面操作事件。
2）、并非所有的事件都会经过冒泡阶段 。所有的事件都要经过捕获阶段和处于目标阶段，但是有些事件会跳过冒泡阶段：如，获得输入焦点的focus事件和失去输入焦点的blur事件。
两次机会在目标对象上面操作事件例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#outer{
position: absolute;
width: 400px;
height: 400px;
top:0;
left: 0;
bottom:0;
right: 0;
margin: auto;
background-color: deeppink;
}
#middle{
position: absolute;
width: 300px;
height:300px;
top:50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
background-color: deepskyblue;
}
#inner{
position: absolute;
width: 100px;
height:100px;
top:50%;
left:50%;
margin-left: -50px;
margin-top: -50px;;
background-color: darkgreen;
text-align: center;
line-height: 100px;
color:white;
}
#outer,#middle,#inner{
border-radius:100%;
}
</style>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
click me!
</div>
</div>
</div>
<script>
var innerCircle= document.getElementById("inner");
innerCircle.addEventListener("click", function () {
alert("innerCircle的click事件在捕获阶段被触发");
},true);
innerCircle.addEventListener("click", function () {
alert("innerCircle的click事件在冒泡阶段被触发");
},false);
var middleCircle= document.getElementById("middle");
middleCircle.addEventListener("click", function () {
alert("middleCircle的click事件在捕获阶段被触发");
},true);
middleCircle.addEventListener("click", function () {
alert("middleCircle的click事件在冒泡阶段被触发");
},false);
var outerCircle= document.getElementById("outer");
outerCircle.addEventListener("click", function () {
alert("outerCircle的click事件在捕获阶段被触发");
},true);
outerCircle.addEventListener("click", function () {
alert("outerCircle的click事件在冒泡阶段被触发");
},false);
</script>
</body>
</html>运行效果就是会陆续弹出6个框，为说明原理我整合成了一个图：
【相关推荐：javascript视频教程、web前端】
Das obige ist der detaillierte Inhalt vonWas ist ein Ereignisstrom in JavaScript?. 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
1386
52
So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript
Dec 17, 2023 pm 02:54 PM
So implementieren Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem. Einführung: Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Spracherkennungstechnologie zu einem wichtigen Bestandteil des Bereichs der künstlichen Intelligenz geworden. Das auf WebSocket und JavaScript basierende Online-Spracherkennungssystem zeichnet sich durch geringe Latenz, Echtzeit und plattformübergreifende Eigenschaften aus und hat sich zu einer weit verbreiteten Lösung entwickelt. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem implementieren.
WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen
Dec 17, 2023 pm 05:30 PM
WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie
Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems
Dec 17, 2023 pm 12:09 PM
Einführung in die Verwendung von JavaScript und WebSocket zur Implementierung eines Online-Bestellsystems in Echtzeit: Mit der Popularität des Internets und dem Fortschritt der Technologie haben immer mehr Restaurants damit begonnen, Online-Bestelldienste anzubieten. Um ein Echtzeit-Online-Bestellsystem zu implementieren, können wir JavaScript und WebSocket-Technologie verwenden. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und eine bidirektionale Kommunikation zwischen Client und Server in Echtzeit realisieren kann. Im Echtzeit-Online-Bestellsystem, wenn der Benutzer Gerichte auswählt und eine Bestellung aufgibt
So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript
Dec 17, 2023 am 09:39 AM
So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript. Im heutigen digitalen Zeitalter müssen immer mehr Unternehmen und Dienste Online-Reservierungsfunktionen bereitstellen. Es ist von entscheidender Bedeutung, ein effizientes Online-Reservierungssystem in Echtzeit zu implementieren. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Reservierungssystem implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist eine Vollduplex-Methode für eine einzelne TCP-Verbindung.
JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems
Dec 17, 2023 pm 05:13 PM
JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das tägliche Leben und die Entscheidungsfindung von großer Bedeutung. Mit der Weiterentwicklung der Technologie können wir genauere und zuverlässigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir
So verwenden Sie insertBefore in Javascript
Nov 24, 2023 am 11:56 AM
Verwendung: In JavaScript wird die Methode insertBefore() verwendet, um einen neuen Knoten in den DOM-Baum einzufügen. Diese Methode erfordert zwei Parameter: den neuen Knoten, der eingefügt werden soll, und den Referenzknoten (d. h. den Knoten, an dem der neue Knoten eingefügt wird).
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
JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Bildverarbeitungssystems
Dec 17, 2023 am 08:41 AM
JavaScript ist eine in der Webentwicklung weit verbreitete Programmiersprache, während WebSocket ein Netzwerkprotokoll für die Echtzeitkommunikation ist. Durch die Kombination der leistungsstarken Funktionen beider können wir ein effizientes Echtzeit-Bildverarbeitungssystem erstellen. In diesem Artikel wird erläutert, wie dieses System mithilfe von JavaScript und WebSocket implementiert wird, und es werden spezifische Codebeispiele bereitgestellt. Zunächst müssen wir die Anforderungen und Ziele des Echtzeit-Bildverarbeitungssystems klären. Angenommen, wir haben ein Kameragerät, das Bilddaten in Echtzeit sammeln kann
