JS中如何巧妙的用事件委托
常见场景:页面有多个相同的按钮需要绑定同样的事件逻辑。
如下HTML,实现:点击每个按钮,当它的 data-id不为null的时候输出它的data-id(实际业务中会有更复杂的逻辑)
<ul id="parent"> <li class="btn" data-id="1">按鈕1</li> <li class="btn" data-id="2">按鈕2</li> <li class="btn" data-id="null">按鈕3</li> <li class="btn" data-id="3">按鈕4</li> <li class="btn" data-id="null">按鈕5</li> </ul>
实现方案一:(缺点 1 for循环影响性能,2每次循环都会在内部创建一个事件,3 如果 li 是动态追加的会导致事件失效。)
var btns=document.getElementsByClassName("btn");//扩展 可以有多种获取DOM方法 for(var i=0;i<btns.length;i++){ btns[i].onclick=function(){ var id=this.getAttribute("data-id"); if(id!="null"){ console.log(id); } } }
实现方案二:(解决了方案一种的2,3缺点,但是还有for循环!IOS下事件委托失效解决方案)
var btns=document.getElementsByClassName("btn"); function handleClick(){ var id=this.getAttribute("data-id"); if(id!="null"){ console.log(id); } } for(var i=0;i<btns.length;i++){ btns[i].addEventListener("click",handleClick,false); }
实现方案三:(完美解决方案1种的所有缺点)
涉及知识点:addEventListener,event
var parent=document.getElementById("parent"); function handleClick(){ var e=window.event||arguments[0]; var target=e.srcElement||e.target; if(target.nodeName.toLowerCase() == 'li'){ var id=target.getAttribute("data-id"); if(id!="null"){ console.log(id); } } } parent.addEventListener("click",handleClick,false);
方案三的升级版:注册绑定事件方便复用
// 1、通用綁定事件 function bind(elem,eventType,callback){ if(elem.addEventListener){ elem.addEventListener(eventType,callback,false); }else{ elem.attachEvent("on"+eventType,function(){ callback.call(elem); }); } } var parent=document.getElementById("parent"); function handleClick(){ var e=window.event||arguments[0]; var target=e.srcElement||e.target; if(target.nodeName.toLowerCase() == 'li'){ var id=target.getAttribute("data-id"); if(id!="null"){ console.log(id); } } } bind(parent,"click",handleClick);
-----------------------------------------------------------------------小二给我来二两轮子!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· Winform-耗时操作导致界面渲染滞后
· Phi小模型开发教程:C#使用本地模型Phi视觉模型分析图像,实现图片分类、搜索等功能
· 语音处理 开源项目 EchoSharp
· drools 规则引擎和 solon-flow 哪个好?solon-flow 简明教程