首頁 >web前端 >js教程 >js事件委託是什麼？ javascript事件委託的介紹

js事件委託是什麼？ javascript事件委託的介紹

不言原創: 2018-08-15 17:31:184300瀏覽

這篇文章帶給大家的內容是關於什麼是js事件委託？ js事件委託的介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

什麼是js事件委託呢？他又有什麼好處？說白了js事件委託就是利用冒泡的原理，把本來應該加入某個元素上的事件委託給他的父級，從而減少DOM互動達到網頁最佳化。

    var oUl = document.getElementById("newsList");    
    //获取ul
    oUl.onclick = function(e){
                //只有点击li时才会触发相应代码执行
                var evt = e || event;                
                var _target = evt.target || evt.srcElement; 
                if(_target.nodeName.toUpperCase() == "LI"){     
                    console.log(_target.innerHTML);         
                }
            }            
            /*nodeName 属性可依据节点的类型返回其名称。
            如果节点是一个元素节点 , nodeName 属性将返回标签名。
            如果节点是一个属性节点， nodeName 属性将返回属性名。
            其他节点类型, nodeName 属性将返根据不同的节点类型返回不同的节点名称。
             toUpperCase() 转为小写
            */

這樣寫就可以不用一次遍歷li只要對ul執行一次DOM就可以達到想要的效果。那什麼是冒泡呢，為什麼可以這樣做？
冒泡事件就是document到觸發事件的那個節點一層層向下捕獲直至事件源然後一層層向上冒泡。這就是事件冒泡，利用這個冒泡機制減少DOM操作，有一點要注意就是onclick不支援捕獲事件，另有其他寫法如下：

oBox.addEventListener("click",function(){
                console.log("click");
            },false);

這種寫法又叫做為DOM2級事件處理。

新增事件監聽器：addEventListener(事件名，處理函數，布林值)
移除事件監聽器：removeEventListener(事件名，處理函數)

注意：事件名稱不帶on。
第一個值是事件名，第二個是處理函數，第三個布林值，預設為false事件句柄在冒泡階段執行，改為true的時候事件句柄在捕獲階段執行。這兩個事件相同，但在IE中不支援這兩個屬性，
IE下的事件監聽器：attachEvent(事件名，處理函數)，detachEvent(事件名，處理函數)
注意：事件名帶on。

有事件冒泡就有組織冒泡，阻止冒泡即不讓事件一層層向上觸發。以下方法可以防止事件冒泡。

return false ;
preventDefault();
window.event.cancelBubble = true ;

//兼容火狐 获取event方法function getEvent(){
    if(window.event){return window.event;}
    func = getEvent.caller;    while(func != null){        
    var arg0 = func.arguments[0];        
    if(arg0){            
    if((arg0.constructor == Event || arg0.constructor == MouseEvent
                || arg0.constructor == KeyboardEvent)
                || (typeof(arg0) == "object" && arg0.preventDefault
                && arg0.stopPropagation)){                
                return arg0;
            }
        }
        func = func.caller;
    }    return null;
}//阻止冒泡到下一个事件function stopPropagations(){
    var ev = getEvent();    if (window.event) {
        ev.cancelBubble = true;
    }else if(ev.preventDefault){
        ev.stopPropagation();//阻止冒泡
    }
}

ps:如果不用事件委託，在頁面新增節點的時候無法取得DOM事件，用事件委託就可以解決了

js事件委託是什麼？ javascript事件委託的介紹

相關文章