js事件委托是什么？javascript事件委托的介绍-js教程-PHP中文网

js事件委托是什么？javascript事件委托的介绍

不言

发布： 2018-08-15 17:31:18

原创

3979人浏览过

本篇文章给大家带来的内容是关于什么是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事件，用事件委托就可以解决了