事件委托 绝地灬酷狼 2023-07-14 05:47 36阅读 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高级程序设计
相关 事件委托 事件委托概念:利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。 首先封装好EventUtil以便兼容IE var EventUtil = { 绝地灬酷狼/ 2023年07月14日 05:47/ 0 赞/ 37 阅读
相关 事件委托 最近刷Zepto视频时,听到里面提到了事件委托,就去查了一下,对事件委托有了些了解,特总结一下。 什么是事件委托 事件委托是利用事件冒泡,只指定一个事件处理程序 素颜马尾好姑娘i/ 2023年06月02日 11:54/ 0 赞/ 12 阅读
相关 事件委托 事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。所有用到按钮的事件(多数鼠标事件和键盘事件)都适合采用事件委托技术, 使用事件委托可以节省内存。 悠悠/ 2022年12月25日 04:00/ 0 赞/ 190 阅读
相关 事件的委托 之前给li写事件的时候发现,用代码新添加的li不能像之前的事件。如同下图! ![20160922200151222][] 后来改变看到有事件委托就可以修复这个bug! 川长思鸟来/ 2022年09月26日 12:59/ 0 赞/ 197 阅读
相关 委托与事件 前面讲到了[委托][Link 1],正如上篇文章所述,委托的出现标志着事件的出现。上篇文章中我们没有用到事件,但细心的读者是否发现,无论是如何使用委托,都会在People 今天药忘吃喽~/ 2022年08月07日 04:35/ 0 赞/ 238 阅读
相关 委托和事件 委托 委托就是将方法当作变量来使用。把委托作为方法的一个载体,方法好像参数一样可以被传递,并进行运算。委托相当于函数的工厂。委托是类型,就好像类是类型一样。(类封装了方法 秒速五厘米/ 2022年07月31日 01:52/ 0 赞/ 273 阅读
相关 事件委托机制 事件委托机制 事件委托机制是利用的是冒泡的原理的,把事件的监听转换到其父元素上,也就是把事件绑定到父元素上面,然后在事件中获取子元素的对象,对其进行相应的操作。 柔光的暖阳◎/ 2022年06月07日 13:16/ 0 赞/ 300 阅读
相关 vue事件委托 vue事件委托 在vue中完成事件委托是非常方便的 例如下面想要点击li标签输入每个li标签的数值 <ul> <li>1</li> 川长思鸟来/ 2021年12月11日 02:57/ 0 赞/ 468 阅读
相关 zepto 事件委托 $('父元素选择器').on('无on的事件','子元素选择器',function(){})' 给父元素的子元素委托事件 (1)同jq区别:可 朴灿烈づ我的快乐病毒、/ 2021年07月24日 20:36/ 0 赞/ 504 阅读
相关 javascript事件委托和jquery事件委托 javascript事件委托和jquery事件委托 初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己思前想后,为了以后自己的查... 朱雀/ 2020年07月02日 07:28/ 0 赞/ 1100 阅读
还没有评论,来说两句吧...