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

資訊專欄INFORMATION COLUMN

事件委托的小應(yīng)用

vvpale / 3466人閱讀

事件委托 
事件委托
利用冒泡原理，把事件加到父級(jí)元素上，觸發(fā)事件的執(zhí)行效果

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

節(jié)省內(nèi)存開銷

對(duì)于追加的節(jié)點(diǎn)同樣有效

舉了例子，創(chuàng)建一堆無序列表，我們希望當(dāng)鼠標(biāo)滑過的時(shí)，改變當(dāng)前 
  •  的背景顏色
      • 
    
    • Event commission
      • 
    
    • mountain
      • 
    
    • leopard
      • 
    
    • tiger
      • 
    
    • Stalin
      • 
    
    • Hitler
      • 
    
    • Barton
      • 

        var ulBox = document.getElementById("ulBox");
    var li = document.getElementsByTagName("li");
    var l = li.length;
    for(i=0;i

    這樣，我們已經(jīng)為每個(gè) 
  •  都添加了事件，但是，這個(gè)事件循環(huán)了 i 次，比較消耗性能。
    

    用事件代理也可以實(shí)現(xiàn)同樣的效果
    

        var ulBox = document.getElementById("ulBox");
    ulBox.onmouseover = function(e){
        var hover = e||window.event;//獲取事件對(duì)象，
        var nodeLi = hover.target||hover.srcElement;//獲取事件對(duì)象的具體子元素
        nodeLi.style.background="red";
    }
    
    ulBox.onmouseout = function(e){
        var hover = e||window.event;//獲取事件對(duì)象，
        var nodeLi = hover.target||hover.srcElement;//獲取事件對(duì)象的具體子元素
        nodeLi.style.background="red";
    }
    

    如果我們要追加幾個(gè) 
  •  ，使用一個(gè)
    • 

    

      
    
    • Event commission
      • 
    
    • mountain
      • 
    
    • leopard
      • 
    
    • tiger
      • 
    
    • Stalin
      • 
    
    • Hitler
      • 
    
    • Barton
      • 

    

    如果使用常規(guī)方法
    

        var ulBox = document.getElementById("ulBox");
    var li = document.getElementsByTagName("li");
    var btn = document.getElementById("btn");
    var l = li.length;
    for(i=0;i

    新加入的 
  •  并不能響應(yīng)滑過變色的事件，因?yàn)樵谔砑油暝刂?，循環(huán)已經(jīng)執(zhí)行完畢。
    

    使用事件委托，即可以直接響應(yīng)事件效果
    

            ulBox.onmouseover=function(e){
            var hover=e||window.event;
            var nodeLi=hover.target||hover.srcElement;
            nodeLi.style.background="red";
        }
        ulBox.onmouseout=function(e){
            var hover=e||window.event;
            var nodeLi=hover.target||hover.srcElement;
            nodeLi.style.background="";
        }
       
        btn.onclick=function(){
            var oLi = document.createElement("li");
            oLi.innerHTML="Low";
            ulBox.appendChild(oLi);
        }

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

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

    相關(guān)文章

    • JavaScript MVC 學(xué)習(xí)筆記（三）類的使用（中）

      摘要：實(shí)際上，可以將其理解為某種形式的繼承。如果上下文是，則使用全局對(duì)象代替。例如的第個(gè)參數(shù)是上下文，后續(xù)是實(shí)際傳入的參數(shù)序列中允許更換上下文是為了共享狀態(tài)，尤其是在事件回調(diào)中。 公開記錄學(xué)習(xí)JS MVC，不知道能堅(jiān)持多久= =。以《基于MVC的JavaScript web富應(yīng)用開發(fā)》為主要學(xué)習(xí)資料。接上一篇類的學(xué)習(xí)，發(fā)現(xiàn)實(shí)在是看暈了，有些例子是能看懂在干嘛，但是不知道為什么這樣做，有的甚至...

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

    • 徹底搞懂JS事件冒泡與捕獲

      摘要：事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個(gè)概念都是為了解決頁面中事件流事件發(fā)生順序的問題。如下假設(shè)三層都有事件監(jiān)聽，這時(shí)我們點(diǎn)擊的小的藍(lán)方框，事件執(zhí)行的順序是怎么樣的呢紅黃藍(lán)事件冒泡微軟提出了名為事件冒泡的事件流。 事件冒泡與事件捕獲 事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個(gè)概念都是為了解決頁面中事件流（事件發(fā)生順序）的問題。 如下：假設(shè)三層div都...

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

    • 徹底搞懂JS事件冒泡與捕獲

      摘要：事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個(gè)概念都是為了解決頁面中事件流事件發(fā)生順序的問題。如下假設(shè)三層都有事件監(jiān)聽，這時(shí)我們點(diǎn)擊的小的藍(lán)方框，事件執(zhí)行的順序是怎么樣的呢紅黃藍(lán)事件冒泡微軟提出了名為事件冒泡的事件流。 事件冒泡與事件捕獲 事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個(gè)概念都是為了解決頁面中事件流（事件發(fā)生順序）的問題。 如下：假設(shè)三層div都...

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

    • 徹底搞懂JS事件冒泡與捕獲

      摘要：事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個(gè)概念都是為了解決頁面中事件流事件發(fā)生順序的問題。如下假設(shè)三層都有事件監(jiān)聽，這時(shí)我們點(diǎn)擊的小的藍(lán)方框，事件執(zhí)行的順序是怎么樣的呢紅黃藍(lán)事件冒泡微軟提出了名為事件冒泡的事件流。 事件冒泡與事件捕獲 事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個(gè)概念都是為了解決頁面中事件流（事件發(fā)生順序）的問題。 如下：假設(shè)三層div都...

      周國輝 評(píng)論0 收藏0

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

    0條評(píng)論

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