事件委托

绝地灬酷狼 2023-07-14 05:47 19阅读 0赞

**事件委托概念**：利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

首先封装好EventUtil以便兼容IE

var EventUtil = { 
            addHandler: function(element,type,handler){ 
                if(element.addEventListener){ //DOM2级事件，支持DOM事件流
                    element.addEventListener(type,handler,false);//冒泡阶段执行
                }else if(element.attachEvent){ //IE：attachEvent("onclick",func)
                    element.attachEvent("on"+type,handler);
                }else{ //DOM0级事件
                    element["on"+type] = handler;
                }
            },
            getEvent: function(event){ //IE：window.event
                return event ? event : window.event;
            },
            getTarget: function(event){ //事件的目标
                return event.target || event.srcElement;
            },
            preventDefault: function(event){ //阻止默认行为
                if(event.preventDefault){ 
                    event.preventDefault();
                }else{ 
                    event.returnValue = false;//IE阻止默认行为
                }
            },
            stopPropagation: function(event){ //阻止冒泡
                if(event.stopPropagation){ 
                    event.stopPropagation();
                }else{ 
                    event.cancelBubble = true;//IE取消冒泡
                }
            }
        }

需求：有一个ul中包含三个li标签，分别对三个li标签执行点击事件，不同的结果

<ul id="myLinks">
            <li id="goSomewhere">1</li>
            <li id="doSth">2</li>
            <li id="sayHi">3</li>
        </ul>

方案一：

var myLinks = document.getElementById("myLinks");
        var item1 = document.getElementById("goSomewhere");
        var item2 = document.getElementById("doSth");
        var item3 = document.getElementById("sayHi");
    
        EventUtil.addHandler(item1,"click",function(event){ 
            location.href = "http://baidu.com";
        })
        EventUtil.addHandler(item2,"click",function(event){ 
            document.title = "I am title";//改变文档标题
        })
        EventUtil.addHandler(item3,"click",function(event){ 
            alert("hi");
        })

方案一分析：如果程序比较复杂，点击事件比较多需要添加多个事件处理程序，就会有很多代码用于点击事件，可以使用事件委托，在DOM树中尽量高的层次添加一个事件处理程序，具体如下：

方案二：

var myLinks = document.getElementById("myLinks");
    
        EventUtil.addHandler(myLinks,"click",function(event){ 
            event = EventUtil.getEvent(event);
            var target = EventUtil.getTarget(event);
            switch(target.id){ 
                case "goSomewhere":
                    location.href = "http://baidu.com";
                    break;
                case "doSth":
                    document.title = "I am title";
                    break;
                case "sayHi":
                    alert("hi");
                    break;
            }
    
        })

方案二分析：上面的代码我们只给ul添加了一个onclick事件处理程序，由于所有列表元素都是这个元素的子节点，并且他们的事件都会冒泡，所以单击事件最终会被这个函数处理，与前面相比，只取了一个DOM元素，只添加了一个事件处理程序。

--JavaScript高级程序设计

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

相关事件委托

事件委托概念：利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。首先封装好EventUtil以便兼容IE var EventUtil = {

绝地灬酷狼/ 2023年07月14日 05:47/ 0 赞/ 20 阅读

相关事件委托

事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。所有用到按钮的事件（多数鼠标事件和键盘事件）都适合采用事件委托技术，使用事件委托可以节省内存。

悠悠/ 2022年12月25日 04:00/ 0 赞/ 170 阅读

相关事件的委托

之前给li写事件的时候发现，用代码新添加的li不能像之前的事件。如同下图！ ![20160922200151222][] 后来改变看到有事件委托就可以修复这个bug!

川长思鸟来/ 2022年09月26日 12:59/ 0 赞/ 184 阅读

相关委托与事件

前面讲到了[委托][Link 1]，正如上篇文章所述，委托的出现标志着事件的出现。上篇文章中我们没有用到事件，但细心的读者是否发现，无论是如何使用委托，都会在People

今天药忘吃喽~/ 2022年08月07日 04:35/ 0 赞/ 218 阅读

相关委托和事件

委托委托就是将方法当作变量来使用。把委托作为方法的一个载体，方法好像参数一样可以被传递，并进行运算。委托相当于函数的工厂。委托是类型，就好像类是类型一样。（类封装了方法

秒速五厘米/ 2022年07月31日 01:52/ 0 赞/ 258 阅读

相关事件委托机制

事件委托机制事件委托机制是利用的是冒泡的原理的，把事件的监听转换到其父元素上，也就是把事件绑定到父元素上面，然后在事件中获取子元素的对象，对其进行相应的操作。

柔光的暖阳◎/ 2022年06月07日 13:16/ 0 赞/ 284 阅读

相关 jQuery事件委托

jQuery事件委托绑定事件监听的问题：新加的元素没有监听 1.事件委托（委派/代理）　　\ 将多个子元素(li)的事件监听委托给父辈元素(ul)处理　　\ 监听

梦里梦外;/ 2021年12月15日 08:13/ 0 赞/ 361 阅读

相关 vue事件委托

vue事件委托在vue中完成事件委托是非常方便的例如下面想要点击li标签输入每个li标签的数值 <ul> <li>1</li>

川长思鸟来/ 2021年12月11日 02:57/ 0 赞/ 450 阅读

相关 zepto 事件委托

$('父元素选择器').on('无on的事件','子元素选择器',function(){})' 给父元素的子元素委托事件（1）同jq区别:可

朴灿烈づ我的快乐病毒、/ 2021年07月24日 20:36/ 0 赞/ 486 阅读

相关 javascript事件委托和jquery事件委托

javascript事件委托和jquery事件委托初衷：很多的面试都会涉及到事件委托，前前后后也看过好多博文，写的都很不错，写的各有千秋，自己思前想后，为了以后自己的查...

朱雀/ 2020年07月02日 07:28/ 0 赞/ 1086 阅读