Heim > Artikel > Web-Frontend > [JavaScript] Zwei völlig gegensätzliche Ereignisflüsse: Event-Bubbling und Event-Capturing
[JavaScript] Zwei völlig gegensätzliche Ereignisflüsse: Event-Bubbling und Event-Capturing
- php是最好的语言Original
- 2018-08-02 09:13:262013Durchsuche
Was ist eine Veranstaltung?
Ereignisse sind spezifische Momente der Interaktion, die innerhalb von Dokumenten und Browserfenstern auftreten.
Was ist Ereignisfluss:
Ereignisfluss beschreibt die Reihenfolge, in der Ereignisse von der Seite empfangen werden, aber interessanterweise Microsoft (IE) und Netscape (Netscape) ) Das Entwicklungsteam hat tatsächlich zwei völlig gegensätzliche Event-Stream-Konzepte vorgeschlagen. Der Event-Stream von IE ist ein Event-Bubbling-Stream (Event-Bubbling), während der Event-Stream von Netscape ein Event-Capturing-Stream (Event-Capturing) ist.
Der erste Typ: Event-Bubbling
Der von IE vorgeschlagene Ereignisfluss wird Event-Bubbling genannt, das heißt, das Ereignis beginnt mit dem spezifischsten Element von Empfangen und dann Schritt für Schritt an weniger spezifische Knoten weitergeben
p——>body——>html——>document
Zweiter Typ: Ereigniserfassung
Weniger spezifische Knoten sollten das Ereignis früher empfangen und der spezifischste Knoten sollte das Ereignis zuletzt empfangen. Der Zweck der Erfassung besteht darin, ein Ereignis zu erfassen, bevor es sein beabsichtigtes Ziel erreicht.
document——>html——>body——>p
DOM-Ereignisfluss
„DOM-Level-2-Ereignis“ angegeben Der Ereignisfluss umfasst drei Phasen: Ereigniserfassungsphase, Zielphase, Ereignisblasenphase
Im DOM-Ereignisfluss empfängt das eigentliche Ziel während der Erfassungsphase keine Ereignisse, was bedeutet, dass während der Erfassungsphase die Das Ereignis stoppt, nachdem es den Körper erreicht hat. Die nächste Stufe befindet sich in der Zielstufe, sodass das Ereignis auf p auftritt und als Teil der Bubbling-Stufe in der Ereignisverarbeitung betrachtet wird. Dann tritt die Blasenphase ein und das Ereignis wird zurück an das Dokument weitergegeben.
Obwohl die Spezifikation „DOM2-Level-Ereignisse“ eindeutig vorschreibt, dass die Erfassungsphase das Ereignisziel nicht einbezieht, lösen aktuelle Mainstream-Browser während der Erfassungsphase Ereignisse auf dem Ereignisobjekt aus. Das Ergebnis ist, dass es zwei Möglichkeiten gibt, Ereignisse am Zielobjekt zu manipulieren.
DOM-Level-2-Ereignishandler
DOM-Level-2-Ereignis definiert zwei Methoden: Operationen zur Verarbeitung von Hinzufügungsereignissen und Löschereignissen:
Hinzufügen event addEventListener() Event entfernen RemoveEventListener()
Alle DOM-Knoten enthalten diese beiden Methoden, und beide enthalten 3 Parameter: (1) Die zu verarbeitende Ereignismethode (zum Beispiel: Klicken, Mouseover, dbclick...) (2) Die Ereignisverarbeitungsfunktion kann eine anonyme Funktion oder eine benannte Funktion sein (wenn Sie das Ereignis jedoch löschen müssen, muss es eine benannte Funktion sein) (3) Ein boolescher Wert, der darstellt Ist es in der Ereignis-Bubbling-Phase, Verarbeitung oder Ereigniserfassungsphase (true: bedeutet, dass der Event-Handler in der Capture-Phase aufgerufen wird; false: bedeutet, dass der Event-Handler in der Bubbling-Phase aufgerufen wird)
//这是一个DOM 2级事件 添加事件最简单的方式（此时添加的是一个匿名函数）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>按钮</button>
<script>
var btn=document.querySelector('button');
btn.addEventListener('click',function(){
console.log('我是按钮')
},false) //当第三个参数不写时，也是默认为false（冒泡时添加事件）
</script>
</body>
</html>rrreeDer DOM2-Level-Handler unterstützt auch das Hinzufügen von zwei Wenn ein Ereignis Behandelt ein Ereignis, werden beide Ereignisse ausgeführt.
In den meisten Fällen fügen wir den Ereignishandler der Bubbling-Phase des Ereignisflusses hinzu, um die Kompatibilität mit verschiedenen Browsern zu maximieren.
Es ist am besten, Ereignishandler nur dann zur Erfassungsphase hinzuzufügen, wenn Sie das Ereignis abfangen müssen , bevor es das Ziel erreicht.
Es wird nicht empfohlen, Ereignishandler während der Ereigniserfassungsphase zu registrieren, wenn dies nicht ausdrücklich erforderlich ist.
Ereignisblasen verhindern
wird hauptsächlich verwendet, um die Ausbreitung von Ereignissen zu verhindern. Verhindert die Weitergabe an andere DOM-Knoten und kann in jeder Phase der Ereignisweitergabe verwendet werden. Die Verwendungsmethode ist wie folgt (kompatibel mit IE):
//添加的函数是命名函数，removeEventListener需要用这种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>按钮</button>
<script>
var btn=document.querySelector('button');
btn.addEventListener('click',foo,false);
function foo(){
console.log('我是按钮')
}
//其实操作就是把写在里面的函数拿到了外面，而在原来的位置用函数名来代替
</script>
</body>
</html>Standardereignisse blockieren
function stopBubble(event){
if(window.event){
//兼容IE
window.event.cancelBubble=true;
}else{
event.stopPropagation();
}
}Verwandte Artikel:
Detaillierte Erläuterung der JS-Bubbling-Ereignisse und der Ereigniserfassung Beispiele
So implementieren Sie JavaScript Event Bubbling und Event Capture
Ähnliche Videos:
JS abstraktes Klassen- und Event-Designmuster Video-Tutorial
Das obige ist der detaillierte Inhalt von[JavaScript] Zwei völlig gegensätzliche Ereignisflüsse: Event-Bubbling und Event-Capturing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!