亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

淺談事件冒泡與事件捕獲

zhunjiee / 1612人閱讀

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

事件冒泡與事件捕獲

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


    
Click me!

上面的代碼當(dāng)中一個(gè)div元素當(dāng)中有一個(gè)p子元素，如果兩個(gè)元素都有一個(gè)click的處理函數(shù)，那么我們?cè)趺床拍苤滥囊粋€(gè)函數(shù)會(huì)首先被觸發(fā)呢？

為了解決這個(gè)問題微軟和網(wǎng)景提出了兩種幾乎完全相反的概念。

事件冒泡

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

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

事件捕獲

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

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

addEventListener的第三個(gè)參數(shù)

“DOM2級(jí)事件”中規(guī)定的事件流同時(shí)支持了事件捕獲階段和事件冒泡階段，而作為開發(fā)者，我們可以選擇事件處理函數(shù)在哪一個(gè)階段被調(diào)用。

addEventListener方法用來為一個(gè)特定的元素綁定一個(gè)事件處理函數(shù)，是JavaScript中的常用方法。addEventListener有三個(gè)參數(shù)：

element.addEventListener(event, function, useCapture)

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

事件代理

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

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

如果點(diǎn)擊頁面中的li元素，然后輸出li當(dāng)中的顏色，我們通常會(huì)這樣寫:

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

利用事件流的特性，我們只綁定一個(gè)事件處理函數(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"){
            alert("The color is " + x.innerHTML);
        }
    }
})();


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

冒泡還是捕獲？

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

IE瀏覽器兼容

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




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


object.attachEvent(event, function)


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


感謝您的閱讀，有不足之處請(qǐng)為我指出。


參考



HTML DOM addEventListener() Method -- w3schools


JavaScript高級(jí)程序設(shè)計(jì)(第3版)


attachEvent method -- MSDN


What is event bubbling and capturing -- Stack Overflow



文章同步在我的博客，本文鏈接：http://blog.acwong.org/2014/10/28/bubbling-and-capturing/

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/85364.html

相關(guān)文章

  • 淺談---事件冒泡--事件捕獲--Vue2.0中的capture

    摘要：直白點(diǎn)事件觸發(fā)順序子元素父元素事件冒泡和事件捕獲圖解標(biāo)準(zhǔn)事件監(jiān)聽標(biāo)準(zhǔn)事件監(jiān)聽其實(shí)是事件冒泡和事件捕獲的混合體任何事件發(fā)生時(shí)，先從頂層開始進(jìn)行事件捕獲，直到事件觸發(fā)到達(dá)了事件源元素。然后，再從事件源往上進(jìn)行事件冒泡，直到到達(dá)。 前言 本文主要介紹 事件冒泡 和 事件捕獲 以及Vue中的capture 主要內(nèi)容 事件捕獲 含義:從最特定的事件目標(biāo)到最不特定的事件目標(biāo)(document對(duì)象...

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

  • JavaScript-淺談DOM事件流

    摘要：事件流指的是從頁面接收事件的順序。級(jí)事件規(guī)定方法的第三個(gè)參數(shù)設(shè)為，表示事件在捕獲階段觸發(fā)。目前支持事件捕獲流的瀏覽器有，，，，。事件流根據(jù)級(jí)事件規(guī)定，事件流應(yīng)該包括三個(gè)階段，事件捕獲階段，處于目標(biāo)階段和事件冒泡階段。 什么是事件？（敲黑板） 事件，就是文檔或?yàn)g覽器窗口發(fā)生的一些特定的交互瞬間。（by 《JavaScript高級(jí)程序設(shè)計(jì)》）比如鼠標(biāo)點(diǎn)擊，雙擊，滾動(dòng)條滑動(dòng)... 什么是事件...

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

  • 淺談JavaScript事件

    摘要：淺談事件事件流的事件流有提出的捕獲流的冒泡流以及級(jí)事件流。真實(shí)的過程取決于事件的目標(biāo)元素以及各目標(biāo)元素的祖先元素是否有事件處理函數(shù)。事件處理函數(shù)需要注意的指的是或后面討論。兩種方法都會(huì)給事件處理函數(shù)傳一個(gè)事件對(duì)象作為參數(shù)。 淺談JavaScript事件 事件流 JavaScript的事件流有：Netscape提出的捕獲流、IE的冒泡流以及DOM2級(jí)事件流。這里只討論DOM2級(jí)事件流。 ...

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

  • 淺談Javascript事件委托（代理）

    摘要：開玩笑啦，提供一種方法叫做事件委托。途中經(jīng)過各個(gè)層次的，并在各上觸發(fā)捕獲事件，直到到達(dá)時(shí)間的目標(biāo)。懂得了事件冒泡的過程，就很容易明白事件委托的運(yùn)作原理。 首先祝大家七夕快樂。。假如現(xiàn)在有一個(gè)的列表，里面可能會(huì)有若干個(gè)列表項(xiàng)?，F(xiàn)在要為每一個(gè)列表項(xiàng)綁定相同的點(diǎn)擊事件，現(xiàn)在你可能會(huì)有這幾種做法： 手動(dòng)為每一個(gè)列表項(xiàng)綁定事件； 在onload的時(shí)候，找到該列表，對(duì)其每一個(gè)子元素進(jìn)行遍歷，循環(huán)...

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

  • 淺談事件委托機(jī)制

    摘要：所謂的事件委托，簡單的來說就是將一個(gè)元素響應(yīng)事件委托給另外一個(gè)元素。而正好瀏覽器當(dāng)中有事件冒泡機(jī)制，一張圖簡單了解下瀏覽器的事件響應(yīng)機(jī)制。 適用場景 在日常開發(fā)過程中，我們經(jīng)常會(huì)遇到這樣一種場景：我需要通過ajax從后端獲取數(shù)據(jù)后動(dòng)態(tài)添加dom節(jié)點(diǎn)來展示數(shù)據(jù)，并且這些dom節(jié)點(diǎn)有時(shí)候又需要是可交互的，例如點(diǎn)擊事件。那么在我們獲取到數(shù)據(jù)之前這些dom節(jié)點(diǎn)是不存在的，也就是說我們沒辦法在獲...

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

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

0條評(píng)論

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