1. 事件綁定的幾種方式

　　?主要介紹一下 最常用的事件設(shè)計(jì) 其他就稍微帶過。

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

　　

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

　　

　　這種做法this表示當(dāng)前DOM對(duì)象 還有一點(diǎn) 這種做法只能綁定一個(gè)事件處理函數(shù) 后面的會(huì)覆蓋前面的。可以看出 只能打印 "2 = div"

　　C） 至于IE下面的attachEvent 函數(shù)就不介紹了 直接介紹W3C的 標(biāo)準(zhǔn)的 addEventListener 和 removeEventListener。

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

　　addEventListener(type, listener, userCapture);

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

　? // listener : 事件處理函數(shù)

　 ?// userCapture 是事件冒泡 還是事件捕獲默認(rèn)false 代表時(shí)間冒泡類型

　　事件處理函數(shù)中this代表的是dom對(duì)象 不是window 這個(gè)特性與attachEvent不同

　　

　　B 同一個(gè)事件處理函數(shù)可以綁定2次 一次用于事件捕獲 一次用于時(shí)間冒泡。

　　

2. 事件處理函數(shù)的執(zhí)行順序

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

　　addEventListener 和attachEvent表現(xiàn)一致。如果給同一個(gè)事件綁定多個(gè)處理函數(shù) 先綁定的先執(zhí)行

　　

　　當(dāng)點(diǎn)擊outA的時(shí)候 會(huì)依次打印出 1 2 3 4 這里需要特別注意 我們給定A綁定多個(gè)onclick事件處理函數(shù) 也是直接點(diǎn)擊A觸發(fā)的事件 所以不涉及事件冒泡和事件捕獲的問題。

　 ?

3. 事件冒泡和事件捕獲

　　　　

　　如果點(diǎn)擊了最內(nèi)側(cè)的C 那么最外層的A算不算被點(diǎn)擊了呢。 很顯然算的 不然就沒有必要區(qū)分事件冒泡和事件捕獲

　　

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

　　

　　事件冒泡 當(dāng)點(diǎn)擊C的時(shí)候 打印順序是3 2 1. 將false 改成true 打印的順序就是 1? 2? 3

4. DOM事件流

　　

　　
　　　　DOM事件流：將事件分為三個(gè)階段：捕獲階段、目標(biāo)階段、冒泡階段。先調(diào)用捕獲階段的處理函數(shù)，其次調(diào)用目標(biāo)階段的處理函數(shù)，最后調(diào)用冒泡　　　　　　　　　　階段的處理函數(shù)。

　　　　

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

　5 事件函數(shù)執(zhí)行先后順序

　　　　目標(biāo)自身觸發(fā)事件 是冒泡還是捕獲無所謂

　　　 捕獲階段的處理函數(shù)最先執(zhí)行，其次是目標(biāo)階段的處理函數(shù)，最后是冒泡階段的處理函數(shù)。

　　　 目標(biāo)階段的處理函數(shù)，先注冊(cè)的先執(zhí)行，后注冊(cè)的后執(zhí)行。

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

　　　　默認(rèn)情況下 多個(gè)事件處理函數(shù)會(huì)按照DOM 事件流模型中的順序執(zhí)行 如果子元素上發(fā)生某個(gè)事件 不需要執(zhí)行父元素上注冊(cè)的事件處理函數(shù)

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

　　　　

　　　　點(diǎn)擊outC的時(shí)候，之后打印出capture–>target，不會(huì)打印出bubble。因?yàn)楫?dāng)事件傳播到outC上的處理函數(shù)時(shí)，通過stopPropagation阻止了事件的繼續(xù)傳播，所以不會(huì)繼續(xù)傳播到冒泡階段。

轉(zhuǎn)載于:https://www.cnblogs.com/syomm/p/5747441.html

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。