JavaScript-Studiennotizen (5) Ereignisfluss- und Ereignisverarbeitungsfunktionszuordnung der Ereignisverarbeitung

如果你在页面上做一次点击例如点击一个按钮，那么你是首先点击了该按钮然后动作传入了按钮的容器，最后传入整个页面Document还是首先点击了页面Document，然后是按钮的容器，最后导致按钮的点击呢？
  javaScript对这种问题的处理方式可以称之为事件流即事件的传播机制。对于事件流IE跟FF有不同的解释。IE下的解决方案称之为：冒泡型事件，而FF下称之为：捕获型事件。顾名思义冒泡型事件是从低而上的触发机制，而捕获型事件则是从上到下的触发机制。《Javascript高级程序设计》一书提到:
    DOM事件流同时支持两种事件触发机制，但是捕获型事件先发生。注意因为事件的目标（也就是DOM树最深的节点）是最精确的元素，实际上它会连续接收两次事件，一次是在捕获过程中，一次是在冒泡过程中。事情到底是不是这样呢？观察下面的程序：

 
   
   
   
 

 
   


IE: Klicken Sie auf „Klicken Sie mich“ und die laufende Sequenz lautet: DIV-->BODY-->HTML Klicken Sie auf andere Teile der Seite: BODY -->HTML
FF: Klicken Sie auf mich. Die laufende Sequenz lautet: DIV-->HTML-->BODY. Klicken Sie auf andere Teile der Seite: HTML-->BODY
Haha, es scheint anders als im Buch steht! Die laufenden Ergebnisse des Programms verraten uns: Ob unter IE oder Firefox, das Ereignis wird immer zuerst durch das genaueste Element (d. h. den tiefsten Knoten im DOM-Baum) ausgelöst und beginnt dann unter IE und unter Firefox zu sprudeln . erfassen.

JavaScript bietet uns drei Möglichkeiten, Ereignisbehandlungsfunktionen zuzuweisen. Die erste Möglichkeit besteht darin, Ereignisbehandlungsfunktionen im HTML-Code zuzuweisen.
Die zweite Methode besteht darin, Ereignisbehandlungsfunktionen in JavaScript zuzuweisen. Diese Methode muss zunächst einen Verweis auf das Element erhalten, dem die Ereignisbehandlungsfunktion zugewiesen werden soll:
1      window.onload = function(){
2 var oDiv = document.getElementById("contentDiv");
3 oDiv.onclick = function(){
4 warning(oDiv.innerHTML);
5 }
6 }Wie oben erwähnt, muss diese Methode sicherstellen, dass beim Zuweisen der Event-Handler-Funktion ein Verweis auf das Element erhalten wurde, sodass dieses Programm das onclick-Ereignis von oDiv innerhalb des onload-Ereignisses platziert, andernfalls meldet es, dass oDiv nicht vorhanden ist definiert. Beachten Sie außerdem, dass bei Verwendung dieser Zuweisungsmethode für Ereignisverarbeitungsfunktionen einem bestimmten Ereignis nur eine Funktion zugewiesen werden kann und die Signatur der Ereignisfunktion in Kleinbuchstaben geschrieben sein muss, da sonst die zuvor zugewiesene Funktion durch die spätere Funktion überschrieben wird. Wenn Sie demselben Ereignis mehr als zwei Verarbeitungsfunktionen zuweisen möchten, müssen Sie die dritte Zuweisungsmethode für Ereignisverarbeitungsfunktionen verwenden.
Im IE verwenden wir die Methode obj.attachEvent(), um einem Element eine Funktion zuzuweisen, und verwenden die Methode obj.detachEvent(), um eine Ereignisverarbeitungsfunktion für ein Element zu trennen, während wir im DOM sind (am Beispiel von FireFox). ) verwenden wir die Methode addEventListener() zum Zuweisen von Funktionen und die Methode removeEventListener() zum Trennen von Funktionen.
Siehe Code:
1                                                                                                                                                                                                                                 var oDiv =        alert(oDiv.innerHTML);
5 }
6 var func2 = function(){
7 warning("also " + oDiv. innerHTML);
8 }
9 //IE
10 if(oDiv.attachEvent){
11 oDiv.attachEvent("onclick",func1);
12 oDiv.attachEvent(" onclick",func2);
13                    //oDiv.detachEvent ("OnClick", Func1);
14} Else If (Odiv.addeventListener) {
15 // Firefox
16 odiv.addeventristener ("click", Func1, TRUE);
17 Odiv .addEventListener("click",func2,true);
18 //oDiv.removeEventListener("click",func1,true);
19 }
20 
21 } Lassen Sie uns den IE erklären. Im Folgenden sind die Unterschiede zwischen dieser Ereignisverarbeitungsfunktion unter FireFox aufgeführt:
1 Im ersten Parameter der Funktion muss unter IE „on“ als Präfix stehen , jedoch nicht unter FF. Die Funktionssignatur wird in beiden Fällen in Kleinbuchstaben verarbeitet.
2. Der dritte Parameter der Funktion addEventListener() unter FireFox stellt Folgendes dar: true bedeutet das Hinzufügen einer Ereignisverarbeitungsfunktion in der Erfassungsphase, false bedeutet das Hinzufügen einer Ereignisverarbeitungsfunktion in der Bubbling-Phase, aber da FireFox keine Bubbling-Ereignisströme unterstützt, ist dies der Fall Hier scheint es keinen Unterschied zu geben, ob wir es auf „True“ oder „False“ setzen. Beachten Sie jedoch, dass, wenn der dritte Parameter in addEventListener() auf true gesetzt ist, auch der dritte Parameter in der Methode removeEventListener() auf denselben Wert gesetzt werden muss, andernfalls schlägt die Methode fehl.
3. In der Laufzeitphase führt der IE zuerst die zuletzt hinzugefügte Ereignisverarbeitungsfunktion aus, dann die vorletzte und so weiter. Im Gegensatz zum IE führt er jedoch die Ereignisverarbeitungsfunktion entsprechend aus Ereignisverarbeitungsfunktion hinzugefügt.

Das Obige ist der Inhalt des Ereignisflusses und der Zuweisung der Ereignisverarbeitungsfunktion. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com)!