JavaScript study notes (5) Event flow and event processing function allocation of event processing

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

 

   
   
   
 
 
   

click me!

IE: Click click me The running sequence is: DIV-->BODY-->HTML Click other parts of the page: BODY-->HTML
FF: Click click me The running sequence is: DIV-->HTML-->BODY Click on other parts of the page: HTML-->BODY
Haha, it seems to be different from what is said in the book! The running results of the program tell us: Whether it is under IE or Firefox, the event is always triggered by the most precise element (that is, the deepest node in the DOM tree) first, and then starts bubbling under IE and under FireFox. capture.

JavaScript provides us with three ways to allocate event handling functions. The first one, like the program above, is to allocate event handling functions in HTML code.
The second method is to allocate event handling functions in JavaScript. This method must first obtain a reference to the element to which the event handling function is to be assigned. Refer to the following program:
1 聽 聽 聽 聽 聽 聽 window.onload = function () {
聽 聽 聽 聽 聽 聽 聽 var oDiv = document.getElementById("contentDiv");
3 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 oDiv.onclick = function(){ 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 alert(oDiv. 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽-- 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽necessary It is guaranteed to have obtained a reference to the element, so this program places the onclick event of oDiv inside the onload event, otherwise it will report that oDiv is not defined. Another thing to note is that when using this event handling function allocation method, only one function can be allocated for a specific event, and the signature of the event function must be lowercase, otherwise the previously allocated function will be overwritten by the later function. If you want to assign more than two processing functions to the same event, you need to use the third event processing function allocation method.
In IE we use the obj.attachEvent() method to assign a function to an element, and use the obj.detachEvent() method to detach an event processing function for an element, while in DOM (taking FireFox as an example) we use addEventListener() method to allocate functions and use the removeEventListener() method to detach functions. 鈥嬧€嬧€嬧€媋lert(oDiv.innerHTML);
5 }
6聽聽聽聽聽聽聽聽 var func2 = function(){
聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 聽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 addEventListener("click",func1,true);
17 oDiv.addEventListener("click",func2,true);
18 //oDiv.removeEventListener("click",func1,true);
19 }
20
21 } Let's explain the differences between this event processing function under IE and FireFox:
1. In the first parameter of the function, there must be "on" as a prefix under IE, but not under FF. Two situations The following processing function signature must be lowercase.
2. The third parameter of the addEventListener() function under FireFox represents: true means adding an event processing function in the capture phase, false means adding an event processing function in the bubbling phase, but since FireFox does not support bubbling event streams, so There seems to be no difference if we set it to True or False here. But one thing to note is that if the third parameter in addEventListener() is set to true, then the third parameter in the removeEventListener() method must also be set to the same value, otherwise the method will fail.
3. In the runtime phase, IE first executes the last added event handler, then the second to last, and so on. However, in FireFox, contrary to IE, it will execute the event handler in the order in which it was added. implement.

The above is the content of event flow and event processing function allocation of event processing. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!