javascript 什么是事件冒泡，如何阻止事件冒泡

當(dāng)我們點擊子元素，觸發(fā)的時事件會傳遞給父元素，這就是事件冒泡。這時候為了不讓父元素受影響就要阻止冒泡，window.event? window.event.cancelBubble = true : e.stopPropagation();這就是阻止冒泡，更多JS技術(shù)交流進(jìn)裙前面是三位數(shù)2九六，中間也是三位數(shù)，5九一，后邊也是三位數(shù)2九零。

創(chuàng)新互聯(lián)主營美蘭網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app軟件定制開發(fā),美蘭h5成都微信小程序搭建,美蘭網(wǎng)站營銷推廣歡迎美蘭等地區(qū)企業(yè)咨詢

javascript 的事件冒泡如何阻止

1、cancelBubble（HTML DOM Event 對象屬性） ：如果事件句柄想阻止事件傳播到包容對象，必須把該屬性設(shè)為 true。

2、stopPropagation（HTML DOM Event 對象方法）：終止事件在傳播過程的捕獲、目標(biāo)處理或起泡階段進(jìn)一步傳播。調(diào)用該方法后，該節(jié)點上處理該事件的處理程序?qū)⒈徽{(diào)用，事件不再被分派到其他節(jié)點。

3、 preventDefault（HTML DOM Event 對象方法）通知瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動作。

例子：

function stopBubble(e)

{

if (e e.stopPropagation)

e.stopPropagation()

else

window.event.cancelBubble=true

}

把這個stopBubble(e)函數(shù)放到你想要的阻止事件冒泡函數(shù)里面就可以阻止事件冒泡了

javascript什么時候會冒泡，什么時候要阻止冒泡

冒泡：想象一下你在水底呼出一口氣。。。。泡泡由內(nèi)往外。。所以冒泡是從最內(nèi)層往最外層

就是子級到父級的過程。。。

想象一下（div比圖片大的多）你只想點擊div中的圖片一下。。。這一下力道深厚穿透圖片后勁打到div上。。。恰巧div也有被點擊的事件，那這不就尷尬了。。。這時候就要阻止冒泡

讓勁停在圖片上就好了不要穿透他

JavaScript中事件捕獲和事件冒泡以及如何阻

瀏覽器中對事件的處理機制默認(rèn)為事件冒泡，例如

div id='div1'div id='div2'div id='div3'/div/div/div

#div1{ width: 500px;height: 500px; background: rgb(12,42,31);}#div2{ width: 450px;height: 450px; background: rgb(212,142,1);}#div3{ width: 350px;height: 350px; background: rgb(1,242,153);}

綁定click事件：

div1.onclick=function(){ alert("div1")}div2.onclick=function(){ alert("div2")}div3.onclick=function(){ alert("div3")}

此時，當(dāng)單擊中間的div3時，先后彈出div3, div2, div1，此為事件冒泡的過程。利用addEventListener可以設(shè)置事件處理機制為捕獲還是冒泡：

div1.addEventListener('click',function(obj){ alert("div1")},true);//如果未false則為事件冒泡，不填的話，默認(rèn)falsediv2.addEventListener('click',function(obj){ alert("div2")},true);div3.addEventListener('click',function(obj){ alert("div3")},true);

這里將第三個參數(shù)設(shè)為true，指定事件處理機制為事件捕獲。此時再次單擊div3時，會依次彈出div1, div2, div3，與之前的相反。

而IE中只有事件冒泡，且沒有addEventListener事件，取而代之的是attachEvent。

但是有時候，我們不喜歡出現(xiàn)事件冒泡或者捕獲，希望單擊div3時，只彈出div3。這時就要用到下面阻止事件冒泡的方法。

1. 阻止冒泡事件

主要是用于阻止事件傳播。阻止它被分派到其他的DOM節(jié)點上，在事件傳播的任何階段都能使用。使用方法如下（兼容IE）：

function stopBubble(event){ if(window.event){//兼容IE window.event.cancelBubble=true; }else{ event.stopPropagation(); }

2. 阻止默認(rèn)事件

像submit這類的表單元素，都會綁定默認(rèn)事件，如果不阻止默認(rèn)事件，則綁定的其他方法也會無效。使用方法如下（兼容IE）：

function stopDefaultEvent(event){ if(window.event){//兼容IE window.event.returnValue=false; }else{ event.preventDefault() } return false;}

JavaScript的事件冒泡是什么

當(dāng)一個元素上的事件被觸發(fā)的時候，比如說鼠標(biāo)點擊了一個按鈕，同樣的事件將會在那個元素的所有祖先元素中被觸發(fā)。這一過程被稱為事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層。任何一個事件的目標(biāo)元素都是最開始的那個元素，在我們的這個例子中也就是按鈕，并且它在我們的元素對象中以屬性的形式出現(xiàn)。使用事件代理的話我們可以把事件處理器添加到一個元素上，等待一個事件從它的子級元素里冒泡上來，并且可以很方便地得知這個事件是從哪個元素開始的。事件的冒泡和捕獲捕獲是從上級元素到下級元素，冒泡是從下級元素到上級元素。在IE中，每個元素和window對象都有兩個方法：attachEvent()和detachEvent()。attachEvent()用來給一個事件附加事件處理函數(shù)。而detachEvent()用來將事件處理函數(shù)分離出來。 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ù)中： 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)元素之后，剩下的事情就是看看它是否是我們所需要的那個元素了。 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)險，所以盡量使它能夠短小精悍。 阻止冒泡 body{ color:#333; font-size:12px; } 什么是事件冒泡,通俗的來講就是 我們?yōu)轫撁鎯?nèi)body添加一個單擊事件,同樣再為頁面內(nèi)li元素添加一個單擊事件..當(dāng)你單擊li的時候. body的事件也會被觸發(fā).....因為li被包含在body元素內(nèi)...你單擊了li同時也單擊了body...這就是事件冒泡.... 在有些時候.我們要阻止這種情況發(fā)生...也就是單擊li事件.不會觸發(fā)body的事件.... 這就叫阻止冒泡! 請單擊下面的列表.會觸發(fā)body事件 項目1 項目2 項目3 請單下面的列表.不會觸發(fā)body事件. 項目1 項目2 項目3 document.body.onclick = function(){//首先為body元素綁定一個單擊事件 alert("BODY事件");//單擊頁面即彈出對話框 } function att_Event(){//為第一組li元素綁定onclick事件 var li = document.getElementById("lia").getElementsByTagName("li"); for(var i=0;i

javascript如何阻止事件冒泡和默認(rèn)行為

js阻止冒泡

在阻止冒泡的過程中，W3C和IE采用的不同的方法，那么我們必須做以下兼容。

復(fù)制代碼 代碼如下:

function stopPro(evt){

var e = evt || window.event;

//returnValue如果設(shè)置了該屬性，它的值比事件句柄的返回值優(yōu)先級高。把這個屬性設(shè)置為 fasle，

//可以取消發(fā)生事件的源元素的默認(rèn)動作。

//window.event?e.returnValue = false:e.preventDefault();

window.event?e.cancelBubble=true:e.stopPropagation();

}

當(dāng)前名稱：javascript冒泡,javascript冒泡排序從大到小
標(biāo)題路徑：http://chinadenli.net/article49/dsgcchh.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、App設(shè)計、做網(wǎng)站、品牌網(wǎng)站建設(shè)、小程序開發(fā)、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)