? ? ? ? ? ? ? ? ? ? ?今天給大家分享：如何阻止事件冒泡和默認(rèn)行為择葡？
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?分享人：聶義中
目錄
1.背景介紹
2.知識(shí)剖析
3.常見問題
4.解決方案
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
7.參考文獻(xiàn)
8.更多討論
1.背景介紹
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?事件冒泡
?當(dāng)事件發(fā)生后肴茄，這個(gè)事件就要開始傳播(從里到外或者從外向里)。為什么要傳播呢偏形？因?yàn)槭录幢旧恚赡埽┎]有處理事件的能力静袖，即處理事件的函數(shù)（方法）并未綁定在該事件源上。例如我們點(diǎn)擊一個(gè)按鈕時(shí)俊扭，就會(huì)產(chǎn)生一個(gè)click事件队橙，但這個(gè)按鈕本身可能不能處理這個(gè)事件，事件必須從這個(gè)按鈕傳播出去，從而到達(dá)能夠處理這個(gè)事件的代碼中（例如我們給按鈕的onclick屬性賦一個(gè)函數(shù)的名字捐康，就是讓這個(gè)函數(shù)去處理該按鈕的click事件）仇矾，或者按鈕的父級綁定有事件函數(shù)，當(dāng)該點(diǎn)擊事件發(fā)生在按鈕上解总，按鈕本身并無處理事件函數(shù)贮匕，則傳播到父級去處理。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?默認(rèn)行為
瀏覽器的一些默認(rèn)的行為倾鲫。例如：如鏈接點(diǎn)擊后跳轉(zhuǎn)到相應(yīng)的頁面粗合，提交按鈕點(diǎn)擊時(shí)會(huì)提交表單數(shù)據(jù)、鼠標(biāo)點(diǎn)擊右鍵會(huì)彈出菜單乌昔，滑動(dòng)滾輪控制滾動(dòng)條等等隙疚。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?2.知識(shí)剖析
? ? ? ? ? ? ? ? ? ? ? 事件冒泡與默認(rèn)事件舉例
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?demo
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?3.常見問題
如何阻止事件冒泡和默認(rèn)事件?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?4.解決方案
阻止事件冒泡
非IE提供stopPropagation()方法,使用event對象在事件函數(shù)中調(diào)用就行IE中提供的是，cancelBubble屬性磕道，默認(rèn)為false供屉，當(dāng)它設(shè)置為true時(shí)，就是阻止事件冒泡溺蕉，也是用event對象在事件函數(shù)中調(diào)用
阻止默認(rèn)行為
非IE提供preventDefault()方法來取消事件默認(rèn)行為伶丐，但是只有當(dāng)cancelable屬性設(shè)置為true的事件，才可以使用preventDefault()來取消事件默認(rèn)行為疯特，使用event對象在事件函數(shù)中調(diào)用就行IE中提供的是returnValue屬性哗魂，默認(rèn)為true，當(dāng)它設(shè)置為false時(shí)漓雅，就是取消事件默認(rèn)行為录别，也是用event對象在事件函數(shù)中調(diào)用
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
還有什么方法可以在阻止事件冒泡和默認(rèn)行為
returnfalse
原生jsreturnfalse只會(huì)阻止默認(rèn)行為
jQuery里面returnfalse既可以阻止冒泡還可以阻止默認(rèn)行為
7.參考文獻(xiàn)
8.更多討論
1? 事件冒泡有可以怎么應(yīng)用？
當(dāng)一個(gè)容器的所有子元素的點(diǎn)擊事件都有相同的效果的時(shí)候邻吞，可以把這些相同的效果綁定到容器元素上组题。
2 冒泡跟捕獲有什么區(qū)別？
冒泡是從最內(nèi)層向外進(jìn)行抱冷，而捕獲是從最外層向里層層進(jìn)行崔列，剛好相反
3? 如果同時(shí)還存在冒泡和捕獲，他們的先后順序是怎么樣的旺遮？
一般來說是先進(jìn)行捕獲赵讯，再進(jìn)行冒泡，但是也可以自己定義他們的先后順序耿眉。
鳴謝
感謝大家觀看
BY:聶義中
今天的分享就到這里啦瘦癌，歡迎大家點(diǎn)贊、轉(zhuǎn)發(fā)跷敬、留言讯私、拍磚~
------------------------------------------------------------------------------------------------------------------------
