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

資訊專欄INFORMATION COLUMN

事件委托

aristark / 2761人閱讀

摘要：當(dāng)有事件觸發(fā)監(jiān)聽器時(shí)，檢查事件的來(lái)源，排除非子元素事件。當(dāng)要觸發(fā)事件的標(biāo)簽里面還有其他標(biāo)簽時(shí)，不能正常的委托，因?yàn)榛蚴抢锩娴臉?biāo)簽元素。

背景

在JS中，添加到頁(yè)面上的事件處理程序都會(huì)占用內(nèi)存，內(nèi)存占用的越多性能就越差，且必須事先就指定好所有的事件處理程序而導(dǎo)致的DOM訪問(wèn)次數(shù)的增加會(huì)延遲整個(gè)頁(yè)面的交互就緒時(shí)間。特別是對(duì)table的td和ul的li的事件處理，如果是給大量子元素添加事件，會(huì)占用大量?jī)?nèi)存。事件處理程序綁定的越多越影響性能，但是又不能說(shuō)不綁定事件，所以我們需要一種方法來(lái)減少綁定的事件，使用事件委托。

原理

在觸發(fā)DOM上的某個(gè)事件的時(shí)候，就會(huì)產(chǎn)生一個(gè)事件對(duì)象event，這個(gè)對(duì)象中包含著所有與事件有關(guān)的信息，其中包括導(dǎo)致事件的元素、事件的類型以及其他與特定事件相關(guān)的信息。避免對(duì)特定的每個(gè)節(jié)點(diǎn)添加事件監(jiān)聽器；相反，事件監(jiān)聽器是被添加到它們的父元素上。事件監(jiān)聽器會(huì)分析從子元素冒泡上來(lái)的事件，找到是哪個(gè)子元素的事件。

使用

假定我們有一個(gè)UL元素，它有幾個(gè)子元素：

    
    
  • Item 1
    • 
    
  • Item 2
    • 
    
  • Item 3
    • 
    
  • Item 4
    • 
    
  • Item 5
    •

假設(shè)，需要觸發(fā)每個(gè)li來(lái)改變他們的背景顏色，你可以給每個(gè)獨(dú)立的li元素添加事件監(jiān)聽器。

window.onload = function(){
    var oUl = document.getElementById("ul");
    var aLi = oUl.getElementsByTagName("li");

    for(var i=0; i

但有時(shí)這些li元素可能會(huì)被刪除，可能會(huì)有新增，監(jiān)聽它們的新增或刪除事件將會(huì)是一場(chǎng)噩夢(mèng)，尤其是當(dāng)你的監(jiān)聽事件的代碼放在應(yīng)用的另一個(gè)地方時(shí)。但是，如果你將監(jiān)聽器安放到它們的父元素上呢？你如何能知道是那個(gè)子元素？


簡(jiǎn)單：當(dāng)子元素的事件冒泡到父ul元素時(shí)，你可以檢查事件對(duì)象的target屬性，捕獲真正節(jié)點(diǎn)元素的引用。


第一步是給父元素添加事件監(jiān)聽器。當(dāng)有事件觸發(fā)監(jiān)聽器時(shí)，檢查事件的來(lái)源，排除非li子元素事件。如果是一個(gè)li元素，我們就找到了目標(biāo)！如果不是一個(gè)li元素，事件將被忽略。


window.onload = function(){
    var oUl = document.getElementById("ul");
    var aLi = oUl.getElementsByTagName("li");

/*
這里要用到事件源：event 對(duì)象，事件源，不管在哪個(gè)事件中，只要你操作的那個(gè)元素就是事件源。
ie：window.event.srcElement
標(biāo)準(zhǔn)下:event.target
nodeName:找到元素的標(biāo)簽名
*/
    oUl.onmouseover = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        //alert(target.innerHTML);
        if(target.nodeName.toLowerCase() == "li"){
        target.style.background = "red";
        }
    }
    oUl.onmouseout = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        //alert(target.innerHTML);
        if(target.nodeName.toLowerCase() == "li"){
        target.style.background = "";
        }
    }
}


總結(jié)

委托（代理）事件是那些被綁定到父級(jí)元素的事件，但是只有當(dāng)滿足一定匹配條件時(shí)才會(huì)被挪。這是靠事件的冒泡機(jī)制來(lái)實(shí)現(xiàn)的。


優(yōu)點(diǎn)：



可以大量節(jié)省內(nèi)存占用，減少事件注冊(cè)，比如在table上代理所有td的click事件就非常棒


可以實(shí)現(xiàn)當(dāng)新增子對(duì)象時(shí)無(wú)需再次對(duì)其綁定事件，對(duì)于動(dòng)態(tài)內(nèi)容部分尤為合適



缺點(diǎn)：


事件代理的應(yīng)用常用應(yīng)該僅限于上述需求下，如果把所有事件都用代理就可能會(huì)出現(xiàn)事件誤判，即本不應(yīng)用觸發(fā)事件的被綁上了事件。當(dāng)要觸發(fā)事件的標(biāo)簽里面還有其他標(biāo)簽時(shí)，不能正常的委托，因?yàn)閠arget或srcElemt是里面的標(biāo)簽元素。


參考文章
http://www.webhek.com/event-d...
http://blog.csdn.net/jinboker...
http://blog.csdn.net/leo8729/...

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

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

相關(guān)文章

  • jQuery源碼解析之你并不真的懂事件委托及target和currenttarget的區(qū)別

    摘要：源碼源碼行被點(diǎn)擊了點(diǎn)擊了，即委托的事件被點(diǎn)擊了優(yōu)先添加委托，再添加其他即委托在上的事件數(shù)量在下標(biāo)為的位置插入委托事件解析可以看到，是優(yōu)先添加委托事件，再添加自身事件，觸發(fā)事件的時(shí)候也是按這個(gè)順序。 showImg(https://segmentfault.com/img/remote/1460000019419722); 前言：請(qǐng)先回顧下我之前寫的一篇文章：JavaScript之事件委...

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

  • 簡(jiǎn)單說(shuō) JavaScript中的事件委托（上）

    摘要：說(shuō)明這篇文章說(shuō)中的事件委托，這次先說(shuō)一些比較基本的知識(shí)。第一段綁定了兩次事件，第二段綁定了一次事件也就是說(shuō)，原來(lái)在上綁定的事件，現(xiàn)在委托在了父元素上，而在上只需要綁定一次就可以了。我們用事件委托的方式，再來(lái)改改。 說(shuō)明 這篇文章說(shuō)JavaScript中的事件委托，這次先說(shuō)一些比較基本的知識(shí)。 事件委托 是什么 先來(lái)看看事件委托的概念 事件委托就是利用事件冒泡，只指定一個(gè)事件處理程序，就...

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

  • 簡(jiǎn)單說(shuō) JavaScript中的事件委托（上）

    摘要：說(shuō)明這篇文章說(shuō)中的事件委托，這次先說(shuō)一些比較基本的知識(shí)。第一段綁定了兩次事件，第二段綁定了一次事件也就是說(shuō)，原來(lái)在上綁定的事件，現(xiàn)在委托在了父元素上，而在上只需要綁定一次就可以了。我們用事件委托的方式，再來(lái)改改。 說(shuō)明 這篇文章說(shuō)JavaScript中的事件委托，這次先說(shuō)一些比較基本的知識(shí)。 事件委托 是什么 先來(lái)看看事件委托的概念 事件委托就是利用事件冒泡，只指定一個(gè)事件處理程序，就...

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

  • 好文推薦：javascript: 事件委托解析

    摘要：前言之前不太明白事件委托。看了這個(gè)帖子，跟著代碼操作了一遍，終于明白了事件委托。推薦理由一步一步，漸進(jìn)式分析來(lái)說(shuō)明事件委托。為簽收快遞，有兩種辦法一是三個(gè)人在公司門口等快遞二是委托給前臺(tái)代為簽收。 前言：之前不太明白事件委托。 看了這個(gè)帖子，跟著代碼操作了一遍，終于明白了事件委托。所以轉(zhuǎn)載。 推薦理由：一步一步，漸進(jìn)式分析來(lái)說(shuō)明事件委托。 什么叫事件委托呢？它還有一個(gè)名字叫事件代理 ...

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

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

0條評(píng)論

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