1.背景介紹
事件冒泡
在一個(gè)對(duì)象上觸發(fā)某類(lèi)事件(比如單擊onclick事件),如果此對(duì)象定義了此事件的處理程序,那么此事件就會(huì)調(diào)用這個(gè)處理程序,如果沒(méi)有定義此事件處理程序或者事件返回true,那么這個(gè)事件會(huì)向這個(gè)對(duì)象的父級(jí)對(duì)象傳播,從里到外,直至它被處理(父級(jí)對(duì)象所有同類(lèi)事件都將被激活),或者它到達(dá)了對(duì)象層次的最頂層,即document對(duì)象(有些瀏覽器是window)。
默認(rèn)行為
瀏覽器的一些默認(rèn)的行為。例如:點(diǎn)擊超鏈接跳轉(zhuǎn),點(diǎn)擊右鍵會(huì)彈出菜單,滑動(dòng)滾輪控制滾動(dòng)條
2.知識(shí)剖析
事件冒泡有什么作用
事件冒泡允許多個(gè)操作被集中處理(把事件處理器添加到一個(gè)父級(jí)元素上,避免把事件處理器添加到多個(gè)子級(jí)元素上),它還可以讓你在對(duì)象層的不同級(jí)別捕獲事件。讓不同的對(duì)象同時(shí)捕獲同一事件,并調(diào)用自己的專(zhuān)屬處理程序做自己的事情
3.常見(jiàn)問(wèn)題
如何阻止事件冒泡和默認(rèn)事件?
4.解決方案
阻止事件冒泡
1、DOM中提供stopPropagation()方法,但I(xiàn)E不支持,使用event對(duì)象在事件函數(shù)中調(diào)用就行
2、IE中提供的是,cancelBubble屬性,默認(rèn)為false,當(dāng)它設(shè)置為true時(shí),就是阻止事件冒泡,也是用event對(duì)象在事件函數(shù)中調(diào)用
3、jQuery中提供了stopPropagation()方法來(lái)停止事件冒泡,當(dāng)需要時(shí),只需用用event對(duì)象來(lái)調(diào)用就行,即event.stopPropagation();
阻止默認(rèn)行為
1、DOM中提供preventDefault()方法來(lái)取消事件默認(rèn)行為,但是只有當(dāng)cancelable屬性設(shè)置為true的事件,才可以使用preventDefault()來(lái)取消事件默認(rèn)行為,使用event對(duì)象在事件函數(shù)中調(diào)用就行
2、IE中提供的是returnValue屬性,默認(rèn)為true,當(dāng)它設(shè)置為false時(shí),就是取消事件默認(rèn)行為,也是用event對(duì)象在事件函數(shù)中調(diào)用
3、jQuery中提供了preventDefault()方法來(lái)阻止元素的默認(rèn)行為,只需要用event對(duì)象來(lái)調(diào)用就好,即event.preventDefault()
同時(shí)阻止事件冒泡和默認(rèn)行為
如果想同時(shí)對(duì)事件對(duì)象停止冒泡和默認(rèn)行為,可以在事件處理函數(shù)中返回false。
這是對(duì)事件對(duì)象同時(shí)調(diào)用stopPropagation()方法和preventDefault()方法的一種簡(jiǎn)寫(xiě)方式。
這樣做會(huì)有一些弊端,不要濫用。
5.編碼實(shí)戰(zhàn)
見(jiàn)視屏
6.擴(kuò)展思考
兼容ie的寫(xiě)法
見(jiàn)視屏
7.參考文獻(xiàn)
8.更多討論
還有哪些其他的默認(rèn)行為?
return false;的機(jī)制與用法?
視頻地址:https://v.qq.com/x/page/i0500owvm6f.html
ppt地址:https://ptteng.github.io/PPT/PPT/js-04-stopBubble,stopDefault2.html#/
文本地址:http://www.jnshu.com/daily/23679?dailyType=others&total=115&page=1&uid=8415&sort=0&orderBy=3
“我們相信人人都可以成為一個(gè)工程師,現(xiàn)在開(kāi)始,找個(gè)師兄,帶你入門(mén),掌控自己學(xué)習(xí)的節(jié)奏,學(xué)習(xí)的路上不再迷茫”。
這里是技能樹(shù).IT修真院,成千上萬(wàn)的師兄在這里找到了自己的學(xué)習(xí)路線,學(xué)習(xí)透明化,成長(zhǎng)可見(jiàn)化,師兄1對(duì)1免費(fèi)指導(dǎo)。快來(lái)與我一起學(xué)習(xí)吧?!