事件委托原理理解
来源:互联网 发布:中国卫星通信下载软件 编辑:程序博客网 时间:2024/06/04 00:58
事件委托也叫事件代理,
定义:利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件
为什么要事件委托:
在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能,因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能。
举例:
<ul id="ul1"> <li>111</li> <li>222</li> <li>333</li> <li>444</li></ul>
实现功能是点击li,弹出123,看到这以前的我拿手就写:
window.onload=function(){ var oUl = document.getElementById("ul1"); var aLi = oUl.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ aLi[i].onclick = function(){ alert(123); } }}
首先要找到ul,然后遍历li,然后点击li的时候,又要找一次目标的li的位置,才能执行最后的操作,每次点击都要找一次li;
从没考虑性能问题,看看事件委托怎么做window.onload = function(){ var oUl = document.getElementById("ul1"); oUl.onclick = function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.nodeName.toLowerCase() == 'li'){ alert(123); alert(target.innerHTML); } }}
Event对象提供了一个属性叫target,可以返回事件的目标节点,我们成为事件源,也就是说,target就可以表示为当前的事件操作的dom,但是不是真正操作dom,当然,这个是有兼容性的,标准浏览器用ev.target,IE浏览器用event.srcElement,此时只是获取了当前节点的位置,并不知道是什么节点名称,这里我们用nodeName来获取具体是什么标签名,这个返回的是一个大写的,我们需要转成小写再做比较
阅读全文
0 0
- 事件委托原理理解
- 委托 事件 代码理解
- c#委托、事件理解
- 理解委托与事件
- C#委托事件理解
- 事件委托原理
- 事件委托,事件绑定,事件冒泡原理
- C#委托,事件理解入门
- C#委托,事件理解入门
- C#委托,事件理解入门
- C#委托,事件理解入门
- 深入理解事件与委托
- C#委托,事件理解入门
- C#委托,事件理解入门
- C#委托,事件理解入门
- C#委托,事件理解入门
- 委托与事件的理解
- C#委托和事件理解
- VS2013原本的win32升级为64位
- Android内存泄漏检查工具
- 柔性数组
- java中参数" ..."的用法和意思
- GLide加载图片还能这样干——基于Glide4.0完美封装
- 事件委托原理理解
- Oracle使用Mybatis实现List批量插入数据(转载)
- cassandra hints文件出错
- 输入几行文本,找出以“ed”结尾的字母
- 淘宝双11促销背后高并发处理之淘宝网采用什么技术架构来实现网站高负载
- 知乎上对FPGA比较中肯的意见,自己比较认同的
- Eclipse上Maven环境配置使用 (全)
- 源码安装airflow
- Git 学习笔记