对于原生js中的事件委托解析
2017-06-02 22:08
375 查看
在日常中,我们可能会听到事件委托这样的概念,有些同学可能对事件委托已经很了解了,也有些同学可能只是听过事件委托,只是会简单的使用,但是对于事件委托的原理不怎么知道。所以该博文会解释一下原生js的事件委托的原理,为什么会有事件委托,为什么可以这样用事件委托等等问题。
1.冒泡:当下级节点触发某个事件的时候,该事件会逐级向上触发上级节点的同类事件。
2.捕获:和冒泡类似,只不过事件的顺序相反。即是从上级节点传递到下级节点
上面的代码就是一个典型的事件委托案例。利用的原理就是事件冒泡,将事件加载父元素上,通过event参数来区别按钮的不同
1.减少页面绑定事件数量,由于页面事件绑定数量越多,页面执行性能越差,所以事件委托可以提高页面的性能
2.事件委托可以灵活的处理子节点动态变化的场景,无论子节点增加还是减少,事件都无需重新绑定
1.js中的事件流
在解析事件委托之前,我们先回顾一下js中的事件流,即冒泡和捕获。1.冒泡:当下级节点触发某个事件的时候,该事件会逐级向上触发上级节点的同类事件。
2.捕获:和冒泡类似,只不过事件的顺序相反。即是从上级节点传递到下级节点
2.事件委托原理
事件委托就是基于js的事件流产生的,事件委托是利用事件冒泡,将事件加在父元素或者祖先元素上,触发该事件。<body> <div id="myDiv"> <input type="button" value="按钮1" id="btn1"> <input type="button" value="按钮2" id="btn2"> <input type="button" value="按钮3" id="btn3"> </div> </body> <script type="text/javascript"> document.getElementById("myDiv").onclick=function(e){ e=window.event||e; var btnId=e.target.id; switch(btnId){ case "btn1": console.log("按钮1"); break; case "btn2": console.log("按钮2"); break; case "btn3": console.log("按钮3"); break; } } </script>
上面的代码就是一个典型的事件委托案例。利用的原理就是事件冒泡,将事件加载父元素上,通过event参数来区别按钮的不同
3.总结
通过对上面事件委托代码的观察,我们可以很容易得出事件委托的好处:1.减少页面绑定事件数量,由于页面事件绑定数量越多,页面执行性能越差,所以事件委托可以提高页面的性能
2.事件委托可以灵活的处理子节点动态变化的场景,无论子节点增加还是减少,事件都无需重新绑定
相关文章推荐
- 原生js事件委托
- 原生js事件批量绑定-事件委托
- JavaScript之事件委托(附原生js和jQuery代码)
- 1.事件委托的原理以及优缺点 2. 手写原生js实现事件代理,并要求兼容浏览器
- JavaScript之事件委托实例(附原生js和jQuery代码)
- 原生js事件委托与简单的jquery事件委托方法
- js原生事件委托
- js原生事件委托的实现
- HTML文档对象的事件及JS函数解析
- C#事件(event) 解析委托
- JS window事件全集解析 (转载)
- 解析js原生方法创建表格效率测试
- C# 委托和事件全解析
- js--事件对象和事件委托
- 原生JS解析XML文档
- 原生js 事件代理方法
- 对于委托的理解 委托和事件
- .net事件和委托的解析
- js键盘事件全面控制详细解析
- C#实战揭秘:深入解析委托与事件的由来