成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

JavaScript事件代理和委托

Nino / 707人閱讀

摘要：我們通過(guò)上面的這個(gè)函數(shù)來(lái)給節(jié)點(diǎn)設(shè)置監(jiān)聽，可以通過(guò)將設(shè)置成來(lái)為事件的捕獲階段添加監(jiān)聽回調(diào)函數(shù)。目標(biāo)階段當(dāng)事件到達(dá)目標(biāo)節(jié)點(diǎn)時(shí)，事件就進(jìn)入了目標(biāo)階段。事件冒泡讓我們可以在這個(gè)或者更上層的元素上監(jiān)聽事件，并且時(shí)間傳播過(guò)程中觸發(fā)回調(diào)函數(shù)。

在JavaScript中，經(jīng)常會(huì)碰到要監(jiān)聽列表中多項(xiàng)li的情形，假設(shè)我們有一個(gè)列表如下：



    
  
  • item1
    • 
  
  • item2
    • 
  
  • item3
    • 
  
  • item4
    •

如果我們要實(shí)現(xiàn)以下功能：當(dāng)鼠標(biāo)點(diǎn)擊某一li時(shí)，alert輸出該li的內(nèi)容，我們通常的寫法是這樣的：

當(dāng)列表項(xiàng)比較少時(shí)，直接給每個(gè)li添加onclick事件

列表項(xiàng)比較多時(shí)，在onload時(shí)就給每個(gè)列表項(xiàng)調(diào)用監(jiān)聽

第一種方法比較簡(jiǎn)單直接，但是沒(méi)有顧及到html與JavaScript的分離，不建議使用，第二種方法的代碼如下：


window.onload=function(){
  var ulNode=document.getElementById("list");
  var liNodes=ulNode.childNodes||ulNode.children;
  for(var i=0;i

由上可以看出來(lái)，假如不停的刪除或添加li，則function（）也要不停的更改操作，易出錯(cuò)，因此推薦使用事件代理，在使用事件代理之前，我們先來(lái)了解一下事件階段(event phase)：

事件階段：

當(dāng)一個(gè)DOM事件被觸發(fā)的時(shí)候，他并不是只在它的起源對(duì)象上觸發(fā)一次，而是會(huì)經(jīng)歷三個(gè)不同的階段。簡(jiǎn)而言之：事件一開始從文檔的根節(jié)點(diǎn)流向目標(biāo)對(duì)象(捕獲階段)，然后在目標(biāo)對(duì)向上被觸發(fā)(目標(biāo)階段)，之后再回溯到文檔的根節(jié)點(diǎn)(冒泡階段)如圖所示（圖片來(lái)自W3C）：

事件捕獲階段(Capture Phase)

事件的第一個(gè)階段是捕獲階段。事件從文檔的根節(jié)點(diǎn)出發(fā)，隨著DOM樹的結(jié)構(gòu)向事件的目標(biāo)節(jié)點(diǎn)流去。途中經(jīng)過(guò)各個(gè)層次的DOM節(jié)點(diǎn)，并在各節(jié)點(diǎn)上觸發(fā)捕獲事件，直到到達(dá)時(shí)間的目標(biāo)節(jié)點(diǎn)。捕獲階段的主要任務(wù)是簡(jiǎn)歷傳播路徑，在冒泡階段，時(shí)間會(huì)通過(guò)這個(gè)路徑回溯到文檔根節(jié)點(diǎn)。


element.removeEventListener(<event-name>, , );

我們通過(guò)上面的這個(gè)函數(shù)來(lái)給節(jié)點(diǎn)設(shè)置監(jiān)聽，可以通過(guò)將;設(shè)置成true來(lái)為事件的捕獲階段添加監(jiān)聽回調(diào)函數(shù)。在實(shí)際應(yīng)用中，我們并沒(méi)有太多使用捕獲階段監(jiān)聽的用例，但是通過(guò)在捕獲階段對(duì)事件的處理，我們可以阻止類似click事件在某個(gè)特定元素上被觸發(fā)。


var form=document.querySeletor("form");
form.addEventListener("click",function(e){
  e.stopPropagation();
  },true);

如果你對(duì)這種用法不是很了解的話，最好還是將設(shè)置為false或者undefined，從而在冒泡階段對(duì)事件進(jìn)行監(jiān)聽。

目標(biāo)階段(Target Phase)

當(dāng)事件到達(dá)目標(biāo)節(jié)點(diǎn)時(shí)，事件就進(jìn)入了目標(biāo)階段。事件在目標(biāo)節(jié)點(diǎn)上被觸發(fā)，然后逆向回流，知道傳播到最外層的文檔節(jié)點(diǎn)。

對(duì)于多層嵌套的節(jié)點(diǎn)，鼠標(biāo)和指針事件經(jīng)常會(huì)被定位到最里層的元素上。假設(shè)，你在一個(gè)div元素上設(shè)置了click的監(jiān)聽函數(shù)，而用戶點(diǎn)擊在了這個(gè)div元素內(nèi)部的p元素上，那么p元素就是這個(gè)時(shí)間的目標(biāo)元素。事件冒泡讓我們可以在這個(gè)div或者更上層的元素上監(jiān)聽click事件，并且時(shí)間傳播過(guò)程中觸發(fā)回調(diào)函數(shù)。

冒泡階段(Bubble Phase)

事件在目標(biāo)事件上觸發(fā)后，并不在這個(gè)元素上終止。它會(huì)隨著DOM樹一層層向上冒泡，直到到達(dá)最外層的根節(jié)點(diǎn)。也就是說(shuō)，同一事件會(huì)一次在目標(biāo)節(jié)點(diǎn)的父節(jié)點(diǎn)，父節(jié)點(diǎn)的父節(jié)點(diǎn)...直到最外層的節(jié)點(diǎn)上觸發(fā)。

絕大多數(shù)事件是會(huì)冒泡的，但并非所有的。具體可見(jiàn)：規(guī)范說(shuō)明

由上我們可以想到，可以使用事件代理來(lái)實(shí)現(xiàn)對(duì)每一個(gè)li的監(jiān)聽。代碼如下：


window.onload=function(){
  var ulNode=document.getElementById("list");
  ulNode.addEventListener("click",function(e){
       if(e.target&&e.target.nodeName.toUpperCase()=="LI"){/*判斷目標(biāo)事件是否為li*/
         alert(e.target.innerHTML);
       }
     },false);
  
};

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

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

相關(guān)文章

  • JavaScript 事件代理和委托

    摘要：原文地址事件代理和委托在中這個(gè)詞經(jīng)常出現(xiàn)，看字面的意思，代理委托。模型將事件處理流程分為三個(gè)階段一事件捕獲階段，二事件目標(biāo)階段，三事件起泡階段。事件目標(biāo)當(dāng)?shù)竭_(dá)目標(biāo)元素之后，執(zhí)行目標(biāo)元素該事件相應(yīng)的處理函數(shù)。 原文地址：JavaScript 事件代理和委托 在javasript中delegate這個(gè)詞經(jīng)常出現(xiàn)，看字面的意思，代理、委托。那么它究竟在什么樣的情況下使用？它的原理又是什么？在...

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

  • js 事件委托 事件代理

    摘要：事件委托事件代理高級(jí)程序設(shè)計(jì)上解釋事件委托就是利用事件冒泡，只指定一個(gè)事件處理程序，就可以管理某一類型的所有事件。事件委托原理事件委托是利用事件的冒泡原理來(lái)實(shí)現(xiàn)的，事件冒泡就是事件從最深的節(jié)點(diǎn)開始，然后逐級(jí)向上傳播事件。 js 事件委托 事件代理 JavaScript高級(jí)程序設(shè)計(jì)上解釋：事件委托就是利用事件冒泡，只指定一個(gè)事件處理程序，就可以管理某一類型的所有事件。 通過(guò)例子類比： 有...

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

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

    摘要：開玩笑啦，提供一種方法叫做事件委托。途中經(jīng)過(guò)各個(gè)層次的，并在各上觸發(fā)捕獲事件，直到到達(dá)時(shí)間的目標(biāo)。懂得了事件冒泡的過(guò)程，就很容易明白事件委托的運(yùn)作原理。 首先祝大家七夕快樂(lè)。。假如現(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

  • js的事件的代理和委托

    摘要：本文要解釋一下事件的代理或者說(shuō)委托的概念，首先直接上定義事件委托就是利用事件冒泡，只指定一個(gè)事件處理程序，就可以管理某一類型的所有事件。這種委托父元素執(zhí)行事件，并利用事件冒泡的原理執(zhí)行子元素相應(yīng)函數(shù)的方法就叫事件的代理，或者叫事件的委托。 本文要解釋一下JavaScript事件的代理或者說(shuō)委托的概念，首先直接上定義：事件委托就是利用事件冒泡，只指定一個(gè)事件處理程序，就可以管理某一類型的...

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

  • javascript事件基礎(chǔ)知識(shí)

    摘要：可選，布爾值，指定事件是否在捕獲或冒泡階段執(zhí)行，默認(rèn)冒泡。適用范圍參數(shù)介紹必須，字符串，事件名稱。必須，指定事件觸發(fā)時(shí)執(zhí)行的函數(shù)。事件冒泡事件冒泡與事件捕獲恰恰相反，事件冒泡順序是由內(nèi)到外進(jìn)行事件傳播，直到根節(jié)點(diǎn)。 什么是事件 javascript與HTML之間交互就是通過(guò)事件實(shí)現(xiàn)的，事件就是文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬間。事件在瀏覽器中是以對(duì)象的形式存在的，即event，...

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

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

0條評(píng)論

閱讀需要支付1元查看
<