淺談Js中關於事件處理函數執行順序的問題

Js給dom元素綁定事件的處理函數總的來講有兩種方式：在html文檔中綁定，在js代碼中綁定。

然而，並不推薦在html標籤上綁定事件。

在js代碼中也能夠分兩種方式綁定事件：

　　1：經過dom元素的onclick等屬性，直接綁定；

　　2：

　　　　a.在ie下使用attachEvent/detachEvent函數的方式進行事件的綁定和取消；

　　　　b.使用W3C標準的addEventListener和removeEventListener，給dom添加事件監聽者和移除。

第一種方式只能綁定一個事件處理函數，後面的會覆蓋前面的。不存在事件處理函數的執行順序問題。

在第二種方式中attachEvent和addEventListener的方法均可以綁定多個事件處理函數，而不會被覆蓋。二者除了兼容性問題之外，還有其餘區別：

　　1：this的含義，attachEvent中this是window，addEventListener中的this是綁定的dom對象呀；

　　2：attachEvent僅支持事件冒泡，addEventListener能夠支持事件冒泡，也支持事件捕獲；

 

事件處理函數的執行順序：

　　1.若是經過addEventListener或attachEvent方法給同一個事件綁定多個處理函數，先綁定的先執行。不涉及事件冒泡和事件捕獲的問題。

　　2.若是在addEventListener函數的第三個參數中設置了事件冒泡或者事件捕獲的狀況，那麼：先調用捕獲階段的處理函數，其次調用目標階段的處理函數，最後調用冒泡階段的處理函數。

　　其中，目標階段函數的執行順序：先註冊的先執行，後註冊的後執行。

 

阻止事件冒泡和捕獲的方法：

　　IE8以及之前能夠經過 window.event.cancelBubble=true；阻止事件的繼續傳播；

　　IE9+/FF/Chrome經過event.stopPropagation()；阻止事件的傳播。