成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS中事件冒泡與捕獲

sixleaves / 733人閱讀

摘要：事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個概念都是為了解決頁面中事件流事件發(fā)生順序的問題。事件冒泡微軟提出了名為事件冒泡的事件流。

事件冒泡與事件捕獲

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


    
Click me!

上面的代碼當中一個div元素當中有一個p子元素，如果兩個元素都有一個click的處理函數(shù)，那么我們怎么才能知道哪一個函數(shù)會首先被觸發(fā)呢？
為了解決這個問題微軟和網(wǎng)景提出了兩種幾乎完全相反的概念。

事件冒泡

微軟提出了名為事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻為把一顆石頭投入水中，泡泡會一直從水底冒出水面。也就是說，事件會從最內(nèi)層的元素開始發(fā)生，一直向上傳播，直到document對象。

因此在事件冒泡的概念下在p元素上發(fā)生click事件的順序應(yīng)該是p -> div -> body -> html -> document

事件捕獲

網(wǎng)景提出另一種事件流名為事件捕獲(event capturing)。與事件冒泡相反，事件會從最外層開始發(fā)生，直到最具體的元素。

因此在事件捕獲的概念下在p元素上發(fā)生click事件的順序應(yīng)該是document -> html -> body -> div -> p

addEventListener的第三個參數(shù)

網(wǎng)景 和 微軟 曾經(jīng)的戰(zhàn)爭還是比較火熱的，當時， 網(wǎng)景主張捕獲方式，微軟主張冒泡方式。后來 w3c 采用折中的方式，平息了戰(zhàn)火，制定了統(tǒng)一的標準——先捕獲再冒泡。
addEventListener的第三個參數(shù)就是為冒泡和捕獲準備的.
addEventListener有三個參數(shù)：

element.addEventListener(event, function, useCapture)

第一個參數(shù)是需要綁定的事件
第二個參數(shù)是觸發(fā)事件后要執(zhí)行的函數(shù)
第三個參數(shù)默認值是false，表示在事件冒泡階段調(diào)用事件處理函數(shù);如果參數(shù)為true，則表示在事件捕獲階段調(diào)用處理函數(shù)。

冒泡的案例 
s1
    
s2

當我們點擊s2的時候，執(zhí)行結(jié)果如下：

http://runjs.cn/detail/kj4jgpli

捕獲的案例 
s1
    
s2

當我們點擊s2的時候，執(zhí)行結(jié)果如下：

http://runjs.cn/detail/c3mjulm0

事件捕獲vs事件冒泡

當事件捕獲和事件冒泡一起存在的情況，事件又是如何觸發(fā)呢。
這里記被點擊的DOM節(jié)點為target節(jié)點

document 往 target節(jié)點，捕獲前進，遇到注冊的捕獲事件立即觸發(fā)執(zhí)行

到達target節(jié)點，觸發(fā)事件（對于target節(jié)點上，是先捕獲還是先冒泡則捕獲事件和冒泡事件的注冊順序，先注冊先執(zhí)行）

target節(jié)點 往 document 方向，冒泡前進，遇到注冊的冒泡事件立即觸發(fā)

總結(jié)下就是:

對于非target節(jié)點則先執(zhí)行捕獲在執(zhí)行冒泡

對于target節(jié)點則是先執(zhí)行先注冊的事件，無論冒泡還是捕獲

s1
    
s2

當我們點擊s2的時候,執(zhí)行結(jié)果如下：

http://runjs.cn/detail/fkq3uyqh

這里大體分析下執(zhí)行結(jié)果
點擊s2，click事件從document->html->body->s1->s2(捕獲前進)
這里在s1上發(fā)現(xiàn)了捕獲注冊事件，則輸出"s1 捕獲事件"
到達s2，已經(jīng)到達目的節(jié)點，
s2上注冊了冒泡和捕獲事件，先注冊的冒泡后注冊的捕獲，則先執(zhí)行冒泡，輸出"s2 冒泡事件"
再在s2上執(zhí)行后注冊的事件，即捕獲事件，輸出"s2 捕獲事件"
下面進入冒泡階段，按照s2->s1->body->html->documen(冒泡前進)
在s1上發(fā)現(xiàn)了冒泡事件，則輸出"s1 冒泡事件"

事件冒泡與事件捕獲應(yīng)用:事件代理

在實際的開發(fā)當中，利用事件流的特性，我們可以使用一種叫做事件代理的方法。

    
    
  • red
    • 
    
  • yellow
    • 
    
  • blue
    • 
    
  • green
    • 
    
  • black
    • 
    
  • white
    •

如果點擊頁面中的li元素，然后輸出li當中的顏色，我們通常會這樣寫:

(function(){
    var color_list = document.getElementById("color-list");
    var colors = color_list.getElementsByTagName("li");
    for(var i=0;i

利用事件流的特性，我們只綁定一個事件處理函數(shù)也可以完成：


(function(){
    var color_list = document.getElementById("color-list");
    color_list.addEventListener("click",showColor,false);
    function showColor(e){
        var x = e.target;
        if(x.nodeName.toLowerCase() === "li"){
            console.log("The color is " + x.innerHTML);
        }
    }
})();


http://runjs.cn/detail/pvsbglwc


使用事件代理的好處不僅在于將多個事件處理函數(shù)減為一個，而且對于不同的元素可以有不同的處理方法。假如上述列表元素當中添加了其他的元素（如：a、span等），我們不必再一次循環(huán)給每一個元素綁定事件，直接修改事件代理的事件處理函數(shù)即可。

冒泡還是捕獲？

對于事件代理來說，在事件捕獲或者事件冒泡階段處理并沒有明顯的優(yōu)劣之分，但是由于事件冒泡的事件流模型被所有主流的瀏覽器兼容，從兼容性角度來說還是建議大家使用事件冒泡模型。

IE瀏覽器兼容

IE瀏覽器對addEventListener兼容性并不算太好，只有IE9以上可以使用。


要兼容舊版本的IE瀏覽器，可以使用IE的attachEvent函數(shù)


object.attachEvent(event, function)


兩個參數(shù)與addEventListener相似，分別是事件和處理函數(shù)，默認是事件冒泡階段調(diào)用處理函數(shù)，要注意的是，寫事件名時候要加上"on"前綴（"onload"、"onclick"等）。

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86333.html

相關(guān)文章

  • JS 中的事件冒泡與捕獲

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

    Rindia 評論0 收藏0

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

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

    Half 評論0 收藏0

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

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

    zhangxiangliang 評論0 收藏0

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

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

    周國輝 評論0 收藏0

發(fā)表評論

0條評論

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