[JavaScript] Zwei völlig gegensätzliche Ereignisflüsse: Event-Bubbling und Event-Capturing-js-Tutorial-php.cn

[JavaScript] Zwei völlig gegensätzliche Ereignisflüsse: Event-Bubbling und Event-Capturing

php是最好的语言

Freigeben： 2018-08-02 09:13:26

Original

2133 Leute haben es durchsucht

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(&#39;button&#39;);
        btn.addEventListener(&#39;click&#39;,function(){
            console.log(&#39;我是按钮&#39;)
        },false)   //当第三个参数不写时，也是默认为false（冒泡时添加事件）
    </script>

</body>
</html>

Nach dem Login kopieren

rrree

Der 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(&#39;button&#39;);
        btn.addEventListener(&#39;click&#39;,foo,false);
        function foo(){
            console.log(&#39;我是按钮&#39;)
        }
           //其实操作就是把写在里面的函数拿到了外面，而在原来的位置用函数名来代替
    </script>
</body>
</html>

Nach dem Login kopieren

Standardereignisse blockieren

function stopBubble(event){
	if(window.event){
        //兼容IE
		window.event.cancelBubble=true;
	}else{
		event.stopPropagation();
	}
}

Nach dem Login kopieren

Verwandte Artikel:

Detaillierte Erläuterung der JS-Bubbling-Ereignisse und der Ereigniserfassung Beispiele

So implementieren Sie JavaScript Event Bubbling und Event Capture

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!