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

資訊專欄INFORMATION COLUMN

事件委托

zombieda / 3280人閱讀

摘要：那么我們用事件委托的方式做從上面我們可以看出我們只給父級(jí)一個(gè)事件，那么我們?cè)趧澾^每一個(gè)的時(shí)候，每次只執(zhí)行一次操作。

事件委托（事件代理） 概述
事件委托就是利用事件冒泡，指定一個(gè)事件處理程序，就可以管理某一類的事件
時(shí)間委托的好處
1、節(jié)省內(nèi)存開銷
2、追加節(jié)點(diǎn)同樣有效
為什么要用事件委托
一般來說，dom需要事件處理，我們直接給他設(shè)事件處理就好了，但是如果多了dom的話，我們就需要設(shè)多個(gè)事件，這樣大大的增加了內(nèi)存的開銷。比如我們有1000個(gè)li，每一個(gè)都加一個(gè)click事件，那么我們就增加了1000個(gè)內(nèi)存空間，如果使10000個(gè)，100000個(gè)的話，可想而知我們將要開辟10000個(gè),100000個(gè)乃至跟多，所以我們?nèi)绻檬录校?只對(duì)他的父級(jí)進(jìn)行一個(gè)dom操作的話，我們只需要開辟一塊內(nèi)存空間就ok。
事件委托怎么實(shí)現(xiàn)
在做事件委托之前我們先做個(gè)一般的方法的例子
子節(jié)點(diǎn)實(shí)現(xiàn)相同的功能：
    
    
  • 111
    • 
    
  • 222
    • 
    
  • 333
    • 
    
  • 444
    •
實(shí)現(xiàn)功能是劃過變色
var lis = document.getElementsByTagName("li")
for(var i=0,l=lis.length;i

上面代碼的意思很簡(jiǎn)單，首先要找到ul，然后遍歷li，然后劃過那個(gè)li的時(shí)候，又要找一次li的位置，每次劃過都要找。如果我們自動(dòng)追li的時(shí)候，每追加一次我們就得寫一次for，我們將消耗太多的內(nèi)存。


那么我們用事件委托的方式做


window.onload = function(){
    var oUl = document.getElementById("ul1");
   oUl.onmousemove= function(ev){
        var oEvent = ev || window.event;
　　　　var target = oEvent.target || oEvent.srcElement;
　　　　target.className="light";
    }
   oUl.onmouseout = function(ev){
        var oEvent = ev || window.event;
　　　　var target = oEvent.target || oEvent.srcElement;
　　　　target.className="";
    }
}


從上面我們可以看出我們只給li父級(jí)一個(gè)事件，那么我們?cè)趧澾^每一個(gè)li的時(shí)候，每次只執(zhí)行一次dom操作。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/91398.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)單說 JavaScript中的事件委托（上）

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

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

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

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

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

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

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

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

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

0條評(píng)論

閱讀需要支付1元查看
<