首页 / JAVASCRIPT / js事件委托是什么？javascript事件委托的介绍

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js事件委托是什么？javascript事件委托的介绍，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2602字，纯文字阅读大概需要4分钟。

内容图文

本篇文章给大家带来的内容是关于什么是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。

有事件冒泡就有组织冒泡，阻止冒泡即不让事件一层层向上触发。以下方法可以阻止事件冒泡。

  1. return false ；

  2. preventDefault();

  3. 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实现事件委托方法详解

以上就是js事件委托是什么？javascript事件委托的介绍的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的js事件委托是什么？javascript事件委托的介绍全部内容，希望文章能够帮你解决js事件委托是什么？javascript事件委托的介绍所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/285200.html

来源：【匿名】