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

資訊專欄INFORMATION COLUMN

冒泡事件

wanghui / 402人閱讀

摘要：在上阻止冒泡事件，使得無(wú)論在點(diǎn)擊按鈕還是顯現(xiàn)出來(lái)的浮層都不會(huì)使浮層消失。其實(shí)，除了使用阻止冒泡的方式阻止事件的傳播，還可以使用方法，使需要綁定給頁(yè)面的函數(shù)在冒泡詢問完成后再綁定。

舉一個(gè)小例子，說(shuō)明下對(duì)冒泡的理解

準(zhǔn)備工作與目的

首先，先寫html，就是一個(gè)按鈕+一個(gè)浮層，再加上點(diǎn)css


    

        
        

            gone with the wind

然后，寫點(diǎn)js實(shí)現(xiàn)功能：點(diǎn)擊ClickMe按鈕彈出gone with the wind浮層，點(diǎn)擊別的地方隱藏浮層

不難理解，點(diǎn)擊$("#clickme")把$("#fuceng") show()出來(lái)，點(diǎn)擊文檔$(document)把$("#fuceng") hide()掉

問題的產(chǎn)生

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

問題解釋：遇到事件時(shí)，先按照黑色箭頭方向從祖先問到自己：捕捉事件，然后再按照紅色箭頭從自己?jiǎn)柕阶嫦龋?strong>冒泡事件。問的內(nèi)容是：某某元素被xxx（事件名）了，你是否有函數(shù)要操作？

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

為了顯示過(guò)程，在兩個(gè)函數(shù)里分別加上console.log，結(jié)果見下圖。
說(shuō)明，先執(zhí)行了$("#clickme")的函數(shù)，后執(zhí)行了$(document)的函數(shù)。

問題的解決

簡(jiǎn)單再描述一遍，就是我們同時(shí)在按鈕和頁(yè)面上綁定了onclick事件，結(jié)果就是觸發(fā)按鈕的onclick同時(shí)也觸發(fā)了頁(yè)面的onclick，因?yàn)榘粹o在頁(yè)面里面。

其中一個(gè)解決方法就是，當(dāng)觸發(fā)按鈕的onclick時(shí)，阻止冒泡事件再往上通知，示意圖如下。

代碼如下：

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

優(yōu)化

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

優(yōu)化探究

上述優(yōu)化代碼能否簡(jiǎn)單成下面這樣呢？

你看，我在點(diǎn)擊按鈕的時(shí)候只監(jiān)聽一次$("document")，又沒有再點(diǎn)擊頁(yè)面了，應(yīng)該沒問題吧？有問題?。?！如下圖。

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

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

使用setTimeout展現(xiàn)冒泡過(guò)程

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的意思就是點(diǎn)擊$("div")的時(shí)候，添加active類，即展現(xiàn)了背景顏色。本例中，點(diǎn)擊最內(nèi)層

的時(shí)候，冒泡事件開始詢問。

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

我們?cè)撁靼椎氖?，所有事情是一步一步做的，即詢問下一個(gè)div時(shí)，n都是已經(jīng)加過(guò)1了，而且，選擇器是$("div")，所以，所有div都綁定了事件。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/96675.html

相關(guān)文章

  • JS中事件冒泡與捕獲

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

    sixleaves 評(píng)論0 收藏0

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

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

    Half 評(píng)論0 收藏0

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

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

    zhangxiangliang 評(píng)論0 收藏0

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

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

    周國(guó)輝 評(píng)論0 收藏0

  • JS 中的事件冒泡與捕獲

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

    Rindia 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

wanghui

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<