資訊專欄INFORMATION COLUMN
摘要：在上阻止冒泡事件，使得無論在點擊按鈕還是顯現(xiàn)出來的浮層都不會使浮層消失。其實，除了使用阻止冒泡的方式阻止事件的傳播，還可以使用方法，使需要綁定給頁面的函數(shù)在冒泡詢問完成后再綁定。
舉一個小例子，說明下對冒泡的理解
準備工作與目的首先，先寫html，就是一個按鈕+一個浮層，再加上點css
gone with the wind
然后，寫點js實現(xiàn)功能：點擊ClickMe按鈕彈出gone with the wind浮層，點擊別的地方隱藏浮層
不難理解，點擊$("#clickme")把$("#fuceng") show()出來，點擊文檔$(document)把$("#fuceng") hide()掉
問題的產(chǎn)生在單擊$("#clickme")的時候并沒有顯示$("#fuceng")，為什么？？？見下圖
問題解釋：遇到事件時，先按照黑色箭頭方向從祖先問到自己：捕捉事件，然后再按照紅色箭頭從自己問到祖先：冒泡事件。問的內(nèi)容是：某某元素被xxx（事件名）了，你是否有函數(shù)要操作？
本例中，沒有捕捉階段，直接到冒泡階段。$("#clickme")被點擊后，操作了自己的函數(shù)：$("#fuceng").show();。那為什么$("#fuceng")不顯示呢？？？因為冒泡還沒結(jié)束，問過$("#clickme")后又問到了它的祖先$(document)：你的一個子孫被點擊了，你有函數(shù)要操作嗎？有?。?！然后操作了它的函數(shù)$("#fuceng").hide();，所以又被隱藏了。。。
為了顯示過程，在兩個函數(shù)里分別加上console.log，結(jié)果見下圖。
說明，先執(zhí)行了$("#clickme")的函數(shù)，后執(zhí)行了$(document)的函數(shù)。
簡單再描述一遍，就是我們同時在按鈕和頁面上綁定了onclick事件，結(jié)果就是觸發(fā)按鈕的onclick同時也觸發(fā)了頁面的onclick，因為按鈕在頁面里面。
其中一個解決方法就是，當(dāng)觸發(fā)按鈕的onclick時，阻止冒泡事件再往上通知，示意圖如下。
代碼如下：
在按鈕的父元素$("#wrap")上添加onclick事件，來阻止按鈕的onclick再向上通知。在$("#wrap")上阻止冒泡事件，使得無論在點擊按鈕還是顯現(xiàn)出來的浮層都不會使浮層消失。
優(yōu)化假使頁面中有很多個浮層，像上面這樣每一個浮層都監(jiān)聽一次$(document)會大大的占用內(nèi)存，所以思路是使用one()方法，只在點擊按鈕的時候監(jiān)聽一次$(document)，代碼如下：
優(yōu)化探究上述優(yōu)化代碼能否簡單成下面這樣呢？
你看，我在點擊按鈕的時候只監(jiān)聽一次$("document")，又沒有再點擊頁面了，應(yīng)該沒問題吧？有問題?。。∪缦聢D。
點擊按鈕（藍色箭頭），調(diào)用里面的函數(shù)，執(zhí)行①、執(zhí)行②。注意，這里執(zhí)行②就是再給頁面添加了一個點擊事件，且，在執(zhí)行按鈕的點擊事件時，冒泡事件的追問是停止的。等調(diào)用完了，再接著問按鈕的父輩、祖輩們按鈕被點擊了，你有沒有函數(shù)需要調(diào)用??？又問到了頁面，這時候頁面是有函數(shù)的，就是之前執(zhí)行的②。
其實，除了使用阻止冒泡的方式阻止事件的傳播，還可以使用setTimeout方法，使需要綁定給頁面的函數(shù)在冒泡詢問完成后再綁定。
使用setTimeout展現(xiàn)冒泡過程html：
css：
#red.active{
background: red;
}
#orange.active{
background: orange;
}
#yellow.active{
background: yellow;
}
#green.active{
background: green;
}
#blue.active{
background: blue;
}
#indigo.active{
background: indigo;
}
#purple.active{
background: purple;
}
#purple{
min-height: 100px;
}
div{
margin:10px;
border: 1px solid black;
}
js:
var n=0;
$("div").on("click",function(e){
setTimeout(function(){
$(e.currentTarget).addClass("active");
},n*1000)
n+=1;
})
效果：
解釋：
html和css很好理解。js的意思就是點擊$("div")的時候，添加active類，即展現(xiàn)了背景顏色。本例中，點擊最內(nèi)層的時候，冒泡事件開始詢問。
purple，等候n*1000后添加active類，立即執(zhí)行n+=1
indigo，等候n*1000后添加active類，立即執(zhí)行n+=1
blue，等候n*1000后添加active類，立即執(zhí)行n+=1
green，等候n*1000后添加active類，立即執(zhí)行n+=1
yellow，等候n*1000后添加active類，立即執(zhí)行n+=1
orange，等候n*1000后添加active類，立即執(zhí)行n+=1
red，等候n*1000后添加active類，立即執(zhí)行n+=1
我們該明白的是，所有事情是一步一步做的，即詢問下一個div時，n都是已經(jīng)加過1了，而且，選擇器是$("div")，所以，所有div都綁定了事件。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96675.html
摘要：事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個概念都是為了解決頁面中事件流事件發(fā)生順序的問題。事件冒泡微軟提出了名為事件冒泡的事件流。 事件冒泡與事件捕獲 事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個概念都是為了解決頁面中事件流（事件發(fā)生順序）的問題。考慮下面這段代碼，就不寫html->head,body之類的代碼了，自行腦補 Click me! ...
摘要：事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個概念都是為了解決頁面中事件流事件發(fā)生順序的問題。如下假設(shè)三層都有事件監(jiān)聽，這時我們點擊的小的藍方框，事件執(zhí)行的順序是怎么樣的呢紅黃藍事件冒泡微軟提出了名為事件冒泡的事件流。 事件冒泡與事件捕獲 事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個概念都是為了解決頁面中事件流（事件發(fā)生順序）的問題。 如下：假設(shè)三層div都...
摘要：事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個概念都是為了解決頁面中事件流事件發(fā)生順序的問題。如下假設(shè)三層都有事件監(jiān)聽，這時我們點擊的小的藍方框，事件執(zhí)行的順序是怎么樣的呢紅黃藍事件冒泡微軟提出了名為事件冒泡的事件流。 事件冒泡與事件捕獲 事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個概念都是為了解決頁面中事件流（事件發(fā)生順序）的問題。 如下：假設(shè)三層div都...
摘要：事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個概念都是為了解決頁面中事件流事件發(fā)生順序的問題。如下假設(shè)三層都有事件監(jiān)聽，這時我們點擊的小的藍方框，事件執(zhí)行的順序是怎么樣的呢紅黃藍事件冒泡微軟提出了名為事件冒泡的事件流。 事件冒泡與事件捕獲 事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個概念都是為了解決頁面中事件流（事件發(fā)生順序）的問題。 如下：假設(shè)三層div都...
摘要：在之前是只支持事件冒泡，包括之后和目前主流的瀏覽器都同時支持兩種事件。中可以用來取消事件冒泡。 剛接觸 JS 的那個時候，啥也不懂，只想著如何利用 Google、百度到的函數(shù)來解決實際的問題，不會想到去一探究竟。 漸漸的，對 JS 的語言的不斷深入，有機會去了解一些原理性東西。最近在看 JQuery 源碼，感觸很多，總想著用原生的 JS 去實現(xiàn)自己的一個 JQuery 庫。說實在的，J...
閱讀 1917·2021-11-25 09:43
閱讀 1423·2021-11-22 14:56
閱讀 3288·2021-11-22 09:34
閱讀 2027·2021-11-15 11:37
閱讀 2282·2021-09-01 10:46
閱讀 1408·2019-08-30 15:44
閱讀 2304·2019-08-30 13:15
閱讀 2403·2019-08-29 13:07
