javascript
JavaScript事件冒泡
2019獨角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
事件的冒泡和捕獲
事件的冒泡有什么好處
事件冒泡的優(yōu)點和缺點
不是所有的事件都能冒泡
阻止事件冒泡
阻止jQuery事件冒泡
? ? ? ? ? ? ? ? ? ? ?
JavaSciprt事件中有兩個很重要的特性：事件冒泡以及目標(biāo)元素。
? ? ??當(dāng)一個元素上的事件被觸發(fā)的時候，比如說鼠標(biāo)點擊了一個按鈕，同樣的事件將會在那個元素的所有祖先元素中被觸發(fā)。這一過程被稱為事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層。
? ? ? 任何一個事件的目標(biāo)元素都是最開始的那個元素，在我們的這個例子中也就是按鈕，并且它在我們的元素對象中以屬性的形式出現(xiàn)。使用事件代理的話我們可以把事 件處理器添加到一個元素上，等待一個事件從它的子級元素里冒泡上來，并且可以很方便地得知這個事件是從哪個元素開始的。
事件的冒泡和捕獲
捕獲是從上級元素到下級元素，冒泡是從下級元素到上級元素。
? ? ??在IE中，每個元素和window對象都有兩個方法：attachEvent()和detachEvent()。attachEvent()用來給一個事件附加事件處理函數(shù)。而detachEvent()用來將事件處理函數(shù)分離出來。
?
| 1 2 3 4 5 6 | var fnClick = function () { alert( "Clicked!" ); } var oDiv = document.getElementById( "div1" ); oDiv.attachEvent( "onclick" , fnClick); oDiv.detachEvent( "onclick" , fnClick); |
事件的冒泡有什么好處
? ? ?想象一下現(xiàn)在我們有一個10列、100行的HTML表格，你希望在用戶點擊表格中的某一單元格的時候做點什么。比如說我有一次就需要讓表格中的每一個單 元格在被點擊的時候變成可編輯狀態(tài)。如果把事件處理器加到這1000個單元格會產(chǎn)生一個很大的性能問題，并且有可能導(dǎo)致內(nèi)存泄露甚至是瀏覽器的崩潰。相反 地，使用事件代理的話，你只需要把一個事件處理器添加到table元素上就可以了，這個函數(shù)可以把點擊事件給截下來，并且判斷出是哪個單元格被點擊了。
? ? ? 代碼很簡單，我們所要關(guān)心的只是如何檢測目標(biāo)元素而已。比方說我們有一個 table元素，ID是“report”，我們?yōu)檫@個表格添加一個事件處理器以調(diào)用editCell函數(shù)。editCell函數(shù)需要判斷出傳到table 來的事件的目標(biāo)元素。考慮到我們要寫的幾個函數(shù)中都有可能用到這一功能，所以我們把它單獨放到一個名為getEventTarget的函數(shù)中：
?
| 1 2 3 4 | function getEventTarget(e) { ??? e = e || window.event; ??? return e.target || e.srcElement; } |
e這個變量表示的是一個事件對象，我們只需要寫一點點跨瀏覽器的代碼來返回目標(biāo)元素，在IE里目標(biāo)元素放在srcElemtn屬性或event.toElement屬性中，而在其它瀏覽器里則是target或event.relatedTarget屬性。
接下來就是editCell函數(shù)了，這個函數(shù)調(diào)用到了 getEventTarget函數(shù)。一旦我們得到了目標(biāo)元素之后，剩下的事情就是看看它是否是我們所需要的那個元素了。
?
| 1 2 3 4 5 6 | function editCell(e) { ??? var target = getEventTarget(e); ??? if (target.tagName.toLowerCase() === 'td' ) { ????? // DO SOMETHING WITH THE CELL ??? } } |
? ? ? 在editCell函數(shù)中，我們通過檢查目標(biāo)元素標(biāo)簽名稱的方法來確定它是否是一個表格的單元格。這種檢查也許過于簡單了點；如果它是這個目標(biāo)元素單元格 里的另一個元素呢？我們需要為代碼做一點小小的修改以便于其找出父級的td 元素。如果說有些單元格不需要被編輯怎么辦呢？此種情況下我們可以為那些不可編輯的單元格添加一個指定的樣式名稱，然后在把單元格變成可編輯狀態(tài)之前先檢 查它是否不包含那個樣式名稱。選擇總是多樣化的，你只需找到適合你應(yīng)用程序的那一種。
事件冒泡的優(yōu)點和缺點
? ? ?那些需要創(chuàng)建的以及駐留在內(nèi)存中的事件處理器少了。這是很重要的一點，這樣我們就提高了性能，并降低了崩潰的風(fēng)險。
? ? ? 在DOM更新后無須重新綁定事件處理器了。如果你的頁面是動態(tài)生成的，比如說通過Ajax，你不再需要在元素被載入或者卸載的時候來添加或者刪除事件處理器了。
? ? ? 潛在的問題也許并不那么明顯，但是一旦你注意到這些問題，你就可以輕松地避免它們：你的事件管理代碼有成為性能瓶頸的風(fēng)險，所以盡量使它能夠短小精悍。
不是所有的事件都能冒泡
blur、focus、load和unload不能像其它事件一樣冒泡。事實上blur和focus可以用事件捕獲而非事件冒泡的方法獲得（在IE之外的其它瀏覽器中）。
需要注意的是：如果你的代碼處理mousemove事件的話你遇上性能瓶頸的風(fēng)險可就大了，因為mousemove事件觸發(fā)非常頻繁。而mouseout則因為其怪異的表現(xiàn)而變得很難用事件代理來管理。
阻止事件冒泡
在IE下解決問題很簡單，用onMouseEnter、 onMouseLeave來代替onMouseOver、onMouseOut就行了，他們的作用基本相同，前者不會發(fā)生冒泡。但是 firefox下沒有這兩個事件.
?
| 1 | window.event.cancelBubble = true (IE)?? event.stopPropagation()? event.preventDefault() (Firefox) |
在IE和FF瀏覽器內(nèi)阻止冒泡行為是不同的。IE中使用cancelBubble，FF中使用stopPropation()。
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | <html> <head> <title>阻止冒泡</title> <style> body{ color: #333; font-size:12px; } </style> </head> <body> <p>什么是事件冒泡,通俗的來講就是 我們?yōu)轫撁鎯?nèi)body添加一個單擊事件,同樣再為頁面內(nèi)li元素添加一個單擊事件..當(dāng)你單擊li的時候.<br> body的事件也會被觸發(fā).....因為li被包含在body元素內(nèi)...你單擊了li同時也單擊了body...這就是事件冒泡....<br /> 在有些時候.我們要阻止這種情況發(fā)生...也就是單擊li事件.不會觸發(fā)body的事件.... 這就叫阻止冒泡! <div id= "a" > ???? <ul id= "lia" >請單擊下面的列表.會觸發(fā)body事件 ???????? <li>項目1</li> ???????? <li>項目2</li> ???????? <li>項目3</li> ???? </ul> ???? <ul id= "lib" >請單下面的列表.不會觸發(fā)body事件. ???????? <li>項目1</li> ???????? <li>項目2</li> ???????? <li>項目3</li> ???? </ul> </div> <script language= "javascript" > document.body.onclick = function (){ //首先為body元素綁定一個單擊事件 ???? alert( "BODY事件" ); //單擊頁面即彈出對話框 } function att_Event(){ //為第一組li元素綁定onclick事件 ???? var li = document.getElementById( "lia" ).getElementsByTagName( "li" ); ???? for ( var i=0;i<li.length;i++){ ???????? li[i].onclick = function (){ ???????????? alert( "Li事件" ); ???????? } ???? } } function att_Event_b(){ //為第二組li元素綁定onclick事件 ???? var li = document.getElementById( "lib" ).getElementsByTagName( "li" ); ???? for ( var i=0;i<li.length;i++){ ???????? li[i].onclick = function (e){ ???????????? alert( "Li事件" ); ???????????? stopBubble(e); //運行阻止冒泡的函數(shù) ???????? } ???? } } //該函數(shù)的功能用來阻止事件冒泡．并兼容多瀏覽器 function stopBubble(e){ ???? //如果傳入了事件對象.那么就是非IE瀏覽器 ???? if (e && e.stopPropagation){ ???????? //因此它支持W3C的stopPropation()方法 ???????? e.stopPropagation(); ???? } ???? else ???? { ???????? //否則,我們得使用IE的方式來取消事件冒泡 ???????? window.event.cancelBubble = true ; ???? } } window.onload = function (){ ???? att_Event(); ???? att_Event_b(); } </script> </body> </html> |
阻止jQuery事件冒泡
jQuery對DOM的事件觸發(fā)具有冒泡特性。有時利用這一特性可以減少重復(fù)代碼，但有時候我們又不希望事件冒泡。這個時候就要阻止 jQuery.Event冒泡。
在jQuery.Event的文檔中的開頭得知，jQuery.Event對象是符合W3C標(biāo)準(zhǔn)的一個事件對象，同時jQuery.Event免去了檢查兼容IE的步驟。
jQuery.Event提供了一個非常簡單的方法來阻止事件冒泡：event.stopPropagation();
?
| 1 2 3 4 | $( "p" ).click( function (event){ ????? event.stopPropagation(); ????? // do something }) |
但是這個方法對使用live綁定的事件沒有作用，需要一個更簡單的方法阻止事件冒泡：return false;
?
| 1 2 3 4 | $( this ).live( "click" , function (){ ????? "Another paragraph!" ; ????? return false ;? |
轉(zhuǎn)載于:https://my.oschina.net/u/2611640/blog/607022
總結(jié)
以上是生活随笔為你收集整理的JavaScript事件冒泡的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CentOS配置网易163 yum源
- 下一篇： SpringAOP拦截Controlle