国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

冒泡事件

smallStone / 348人閱讀

摘要：在上阻止冒泡事件，使得無論在點擊按鈕還是顯現出來的浮層都不會使浮層消失。其實，除了使用阻止冒泡的方式阻止事件的傳播，還可以使用方法，使需要綁定給頁面的函數在冒泡詢問完成后再綁定。

舉一個小例子，說明下對冒泡的理解

準備工作與目的

首先，先寫html，就是一個按鈕+一個浮層，再加上點css


    

        
        

            gone with the wind

然后，寫點js實現功能：點擊ClickMe按鈕彈出gone with the wind浮層，點擊別的地方隱藏浮層

不難理解，點擊$("#clickme")把$("#fuceng") show()出來，點擊文檔$(document)把$("#fuceng") hide()掉

問題的產生

在單擊$("#clickme")的時候并沒有顯示$("#fuceng")，為什么？？？見下圖

問題解釋：遇到事件時，先按照黑色箭頭方向從祖先問到自己：捕捉事件，然后再按照紅色箭頭從自己問到祖先：冒泡事件。問的內容是：某某元素被xxx（事件名）了，你是否有函數要操作？

本例中，沒有捕捉階段，直接到冒泡階段。$("#clickme")被點擊后，操作了自己的函數：$("#fuceng").show();。那為什么$("#fuceng")不顯示呢？？？因為冒泡還沒結束，問過$("#clickme")后又問到了它的祖先$(document)：你的一個子孫被點擊了，你有函數要操作嗎？有?。?！然后操作了它的函數$("#fuceng").hide();，所以又被隱藏了。。。

為了顯示過程，在兩個函數里分別加上console.log，結果見下圖。
說明，先執行了$("#clickme")的函數，后執行了$(document)的函數。

問題的解決

簡單再描述一遍，就是我們同時在按鈕和頁面上綁定了onclick事件，結果就是觸發按鈕的onclick同時也觸發了頁面的onclick，因為按鈕在頁面里面。

其中一個解決方法就是，當觸發按鈕的onclick時，阻止冒泡事件再往上通知，示意圖如下。

代碼如下：

在按鈕的父元素$("#wrap")上添加onclick事件，來阻止按鈕的onclick再向上通知。在$("#wrap")上阻止冒泡事件，使得無論在點擊按鈕還是顯現出來的浮層都不會使浮層消失。

優化

假使頁面中有很多個浮層，像上面這樣每一個浮層都監聽一次$(document)會大大的占用內存，所以思路是使用one()方法，只在點擊按鈕的時候監聽一次$(document)，代碼如下：

優化探究

上述優化代碼能否簡單成下面這樣呢？

你看，我在點擊按鈕的時候只監聽一次$("document")，又沒有再點擊頁面了，應該沒問題吧？有問題?。。∪缦聢D。

點擊按鈕（藍色箭頭），調用里面的函數，執行①、執行②。注意，這里執行②就是再給頁面添加了一個點擊事件，且，在執行按鈕的點擊事件時，冒泡事件的追問是停止的。等調用完了，再接著問按鈕的父輩、祖輩們按鈕被點擊了，你有沒有函數需要調用??？又問到了頁面，這時候頁面是有函數的，就是之前執行的②。

其實，除了使用阻止冒泡的方式阻止事件的傳播，還可以使用setTimeout方法，使需要綁定給頁面的函數在冒泡詢問完成后再綁定。

使用setTimeout展現冒泡過程

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類，即展現了背景顏色。本例中，點擊最內層

的時候，冒泡事件開始詢問。

purple，等候n*1000后添加active類，立即執行n+=1

indigo，等候n*1000后添加active類，立即執行n+=1

blue，等候n*1000后添加active類，立即執行n+=1

green，等候n*1000后添加active類，立即執行n+=1

yellow，等候n*1000后添加active類，立即執行n+=1

orange，等候n*1000后添加active類，立即執行n+=1

red，等候n*1000后添加active類，立即執行n+=1

我們該明白的是，所有事情是一步一步做的，即詢問下一個div時，n都是已經加過1了，而且，選擇器是$("div")，所以，所有div都綁定了事件。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52819.html

相關文章

  • JS中事件冒泡與捕獲

    摘要：事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是為了解決頁面中事件流事件發生順序的問題。事件冒泡微軟提出了名為事件冒泡的事件流。 事件冒泡與事件捕獲 事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是為了解決頁面中事件流（事件發生順序）的問題?？紤]下面這段代碼，就不寫html->head,body之類的代碼了，自行腦補 Click me! ...

    sixleaves 評論0 收藏0

  • 徹底搞懂JS事件冒泡與捕獲

    摘要：事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是為了解決頁面中事件流事件發生順序的問題。如下假設三層都有事件監聽，這時我們點擊的小的藍方框，事件執行的順序是怎么樣的呢紅黃藍事件冒泡微軟提出了名為事件冒泡的事件流。 事件冒泡與事件捕獲 事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是為了解決頁面中事件流（事件發生順序）的問題。 如下：假設三層div都...

    Half 評論0 收藏0

  • 徹底搞懂JS事件冒泡與捕獲

    摘要：事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是為了解決頁面中事件流事件發生順序的問題。如下假設三層都有事件監聽，這時我們點擊的小的藍方框，事件執行的順序是怎么樣的呢紅黃藍事件冒泡微軟提出了名為事件冒泡的事件流。 事件冒泡與事件捕獲 事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是為了解決頁面中事件流（事件發生順序）的問題。 如下：假設三層div都...

    zhangxiangliang 評論0 收藏0

  • 徹底搞懂JS事件冒泡與捕獲

    摘要：事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是為了解決頁面中事件流事件發生順序的問題。如下假設三層都有事件監聽，這時我們點擊的小的藍方框，事件執行的順序是怎么樣的呢紅黃藍事件冒泡微軟提出了名為事件冒泡的事件流。 事件冒泡與事件捕獲 事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是為了解決頁面中事件流（事件發生順序）的問題。 如下：假設三層div都...

    周國輝 評論0 收藏0

  • JS 中的事件冒泡與捕獲

    摘要：在之前是只支持事件冒泡，包括之后和目前主流的瀏覽器都同時支持兩種事件。中可以用來取消事件冒泡。 剛接觸 JS 的那個時候，啥也不懂，只想著如何利用 Google、百度到的函數來解決實際的問題，不會想到去一探究竟。 漸漸的，對 JS 的語言的不斷深入，有機會去了解一些原理性東西。最近在看 JQuery 源碼，感觸很多，總想著用原生的 JS 去實現自己的一個 JQuery 庫。說實在的，J...

    Rindia 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<