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

資訊專欄INFORMATION COLUMN

事件委托

zombieda / 3225人閱讀

摘要:那么我們用事件委托的方式做從上面我們可以看出我們只給父級一個事件,那么我們在劃過每一個的時候,每次只執(zhí)行一次操作。

事件委托(事件代理) 概述
事件委托就是利用事件冒泡,指定一個事件處理程序,就可以管理某一類的事件
時間委托的好處
1、節(jié)省內(nèi)存開銷
2、追加節(jié)點同樣有效
為什么要用事件委托
一般來說,dom需要事件處理,我們直接給他設(shè)事件處理就好了,但是如果多了dom的話,我們就需要設(shè)多個事件,這樣大大的增加了內(nèi)存的開銷。比如我們有1000個li,每一個都加一個click事件,那么我們就增加了1000個內(nèi)存空間,如果使10000個,100000個的話,可想而知我們將要開辟10000個,100000個乃至跟多,所以我們?nèi)绻檬录校?只對他的父級進(jìn)行一個dom操作的話,我們只需要開辟一塊內(nèi)存空間就ok。
事件委托怎么實現(xiàn)
在做事件委托之前我們先做個一般的方法的例子
子節(jié)點實現(xiàn)相同的功能:
  • 111
  • 222
  • 333
  • 444
實現(xiàn)功能是劃過變色
var lis = document.getElementsByTagName("li")
for(var i=0,l=lis.length;i
上面代碼的意思很簡單,首先要找到ul,然后遍歷li,然后劃過那個li的時候,又要找一次li的位置,每次劃過都要找。如果我們自動追li的時候,每追加一次我們就得寫一次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父級一個事件,那么我們在劃過每一個li的時候,每次只執(zhí)行一次dom操作。

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

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

相關(guān)文章

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

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

    khs1994 評論0 收藏0
  • 簡單說 JavaScript中的事件委托(上)

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

    fireflow 評論0 收藏0
  • 簡單說 JavaScript中的事件委托(上)

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

    SexySix 評論0 收藏0
  • 好文推薦:javascript: 事件委托解析

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

    Wuv1Up 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<