JS中如何巧妙的用事件委托
2017-09-20 14:08
375 查看
常见场景:页面有多个相同的按钮需要绑定同样的事件逻辑。
如下HTML,实现:点击每个按钮,当它的 data-id不为null的时候输出它的data-id(实际业务中会有更复杂的逻辑)
实现方案一:(缺点 1 for循环影响性能,2每次循环都会在内部创建一个事件,3 如果 li 是动态追加的会导致事件失效。)
实现方案二:(解决了方案一种的2,3缺点,但是还有for循环!IOS下事件委托失效解决方案)
实现方案三:(完美解决方案1种的所有缺点)
涉及知识点:addEventListener,event
方案三的升级版:注册绑定事件方便复用
如下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);
相关文章推荐
- 姿势最重要:JS中如何巧用事件委托
- js---JavaScript中的事件委托/事件代理,如何通过事件委托进行异步DOM事件监听
- js事件委托
- 如何快速找出网页中事件对应的js代码片段
- 根据jquery解密js事件委托机制
- js中的事件委托或是事件代理详解——为未创建的元素添加事件、对批量元素添加事件
- js事件委托
- JS 中的事件绑定、事件监听与事件委托
- JS事件委托学习(转)
- js中的事件委托或是事件代理详解
- 详解js的事件代理(委托)
- 如何取消JS事件的派发——stopPropagation()
- 【javascript】js事件委托
- C# 如何理解委托事件(一)
- js的事件代理/委托
- js动态添加事件-事件委托
- JS 事件绑定、事件监听、事件委托详细介绍
- 强大的js事件委托
- JavaScript之事件委托(附原生js和jQuery代码)
- masterpage中服务器端控件命名规则和如何用控件名取得document中的对象,用js动态设置控件事件和属性