事件委托的小應用

vvpale 發(fā)布于2019-08-22 10:53 / 3465人閱讀

事件委托

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

優(yōu)點：

節(jié)省內存開銷

對于追加的節(jié)點同樣有效

舉了例子，創(chuà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
這樣，我們已經為每個 
 都添加了事件，但是，這個事件循環(huán)了 i 次，比較消耗性能。
用事件代理也可以實現(xiàn)同樣的效果
    var ulBox = document.getElementById("ulBox");
    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="red";
    }
如果我們要追加幾個 
 ，使用一個


    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
新加入的 
 并不能響應滑過變色的事件，因為在添加完元素之前，循環(huán)已經執(zhí)行完畢。
使用事件委托，即可以直接響應事件效果
        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);
        }

云服務器 GPU云服務器委托事件事件委托事件委托c javascript事件委托

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/91396.html

JavaScript MVC 學習筆記（三）類的使用（中）

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

DandJ 2019-08-22 10:56 評論0 收藏0
徹底搞懂JS事件冒泡與捕獲

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

Half 2019-08-02 15:29 評論0 收藏0
徹底搞懂JS事件冒泡與捕獲

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

zhangxiangliang 2019-08-23 18:36 評論0 收藏0
徹底搞懂JS事件冒泡與捕獲

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

周國輝 2019-08-30 11:22 評論0 收藏0