1. 事件綁定的幾種方式

　　?主要介紹一下 最常用的事件設計 其他就稍微帶過。

　　直接在代碼里面添加onclick指定函數名字。

　　

　　B) 在JS代碼中通過dom元素的onclick等屬性

　　

　　這種做法this表示當前DOM對象 還有一點 這種做法只能綁定一個事件處理函數 后面的會覆蓋前面的。可以看出 只能打印 "2 = div"

　　C） 至于IE下面的attachEvent 函數就不介紹了 直接介紹W3C的 標準的 addEventListener 和 removeEventListener。

　　IE8 之前都不支持 IE9就開始支持了。

　　addEventListener(type, listener, userCapture);

　　// type : 事件類型 不含"on"? "click" "keydown"

　? // listener : 事件處理函數

　 ?// userCapture 是事件冒泡 還是事件捕獲默認false 代表時間冒泡類型

　　事件處理函數中this代表的是dom對象 不是window 這個特性與attachEvent不同

　　

　　B 同一個事件處理函數可以綁定2次 一次用于事件捕獲 一次用于時間冒泡。

　　

2. 事件處理函數的執行順序

　　前面的方式都不能實現事件的重復綁定 所以自然也就不存在執行順序的問題 最后面的一種可以重復綁定 所以需要了解執行順序的問題。

　　addEventListener 和attachEvent表現一致。如果給同一個事件綁定多個處理函數 先綁定的先執行

　　

　　當點擊outA的時候 會依次打印出 1 2 3 4 這里需要特別注意 我們給定A綁定多個onclick事件處理函數 也是直接點擊A觸發的事件 所以不涉及事件冒泡和事件捕獲的問題。

　 ?

3. 事件冒泡和事件捕獲

　　　　

　　如果點擊了最內側的C 那么最外層的A算不算被點擊了呢。 很顯然算的 不然就沒有必要區分事件冒泡和事件捕獲

　　

　　一般來說 事件冒泡機制用的更多一點 所以在IE8 之前 IE 只支持事件冒泡 IE9+/FF/Chrome這2種模型都支持，可以通過addEventListener((type, listener, useCapture)的useCapture來設定，useCapture=false代表著事件冒泡，useCapture=true代表著采用事件捕獲。

　　

　　事件冒泡 當點擊C的時候 打印順序是3 2 1. 將false 改成true 打印的順序就是 1? 2? 3

4. DOM事件流

　　

　　
　　　　DOM事件流：將事件分為三個階段：捕獲階段、目標階段、冒泡階段。先調用捕獲階段的處理函數，其次調用目標階段的處理函數，最后調用冒泡　　　　　　　　　　階段的處理函數。

　　　　

　　　　當點擊outC的時候，依次打印出capture1–>capture2–>target–>bubble2–>bubble1。到這里是不是可以理解addEventListener(type,handler,useCapture)這個API中第三個參數useCapture的含義呢？useCapture=false意味著：將事件處理函數加入到冒泡階段，在冒泡階段會被調用；useCapture=true意味著：將事件處理函數加入到捕獲階段，在捕獲階段會被調用。從DOM事件流模型可以看出，捕獲階段的事件處理函數，一定比冒泡階段的事件處理函數先執行。

　5 事件函數執行先后順序

　　　　目標自身觸發事件 是冒泡還是捕獲無所謂

　　　 捕獲階段的處理函數最先執行，其次是目標階段的處理函數，最后是冒泡階段的處理函數。

　　　 目標階段的處理函數，先注冊的先執行，后注冊的后執行。

?6. 阻止事件冒泡和捕獲

　　　　默認情況下 多個事件處理函數會按照DOM 事件流模型中的順序執行 如果子元素上發生某個事件 不需要執行父元素上注冊的事件處理函數

　　　　那么我們可以停止捕獲和冒泡?前面提到的事件綁定方式，都可以實現阻止事件的傳播。由于第5種方式，是最推薦的做法。所以我們基于第5種方　　　　式，看看如何阻止事件的傳播行為。IE8以及以前可以通過 window.event.cancelBubble=true阻止事件的繼續傳播；IE9+/FF/Chrome通過　　　　　event.stopPropagation()阻止事件的繼續傳播。

　　　　

　　　　點擊outC的時候，之后打印出capture–>target，不會打印出bubble。因為當事件傳播到outC上的處理函數時，通過stopPropagation阻止了事件的繼續傳播，所以不會繼續傳播到冒泡階段。

轉載于:https://www.cnblogs.com/syomm/p/5747441.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的JavaScript 中的事件设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。