JS中的事件委托实例浅析
本文实例讲述了JS中的事件委托。分享给大家供大家参考,具体如下:
事件委托(也叫事件代理),其实这个问题也简单,要想弄明白事件委托,我们先要把事件冒泡的机制搞清楚。举个事件冒泡的例子:
<ul> <li>点击</li> </ul> <script> var ul=document.getElementsByTagName('ul')[0]; var li=document.getElementsByTagName('li')[0]; ul.addEventListener('click', function(){ alert('我是ul,我被点击了'); }, false); li.addEventListener('click', function(){ alert('我是li,我被点击了'); }, false); </script>
在这段代码中,当我们点击li的时候出发了li的click事件,但是在这时,ul的click事件也被触发了,这就是事件的冒泡。搞明白这个之后,我们就可以来说事件委托了,既然事件能从子元素(li)冒泡的父元素(ul)身上,那么我们就可以给ul自己加一个click事件,把所有li的事件都委托给了我们的父级(ul)身上,可能到这里有些朋友还是不明白这个事件委托到底有什么用,我们在举一个事件委托的实例来说明一下:
<ul> <li>点击1</li> <li>点击2</li> <li>点击3</li> <li>点击4</li> <li>点击5</li> </ul> <script> //使用事件委托的代码 var ul=document.getElementsByTagName('ul')[0]; ul.addEventListener('click', function(e){ alert(e.target.innerHTML); }, false); //不使用事件委托,循环给li添加click事件 var li=document.getElementsByTagName('li') for(var i=0;i<li.length;i++){ li[i].onclick=function(){ alert(this.innerHTML); } } </script>
我们以上代码把事件委托给了ul,只给ul增加点击事件,在浏览器中运行点击对应的li会弹出li对应的innerHTML
,这个function(e){};
中的e这个参数实际上就是当前我们点击li时,系统传给我们的一些事件信息,e.target
实际上指的就是当前我们点击的这个li,在这里我们每次弹出的都是当前点击对象的innerHTML
,这就是一个简单的事件委托的案例。
而事件委托对于我们优化代码意义是非常大的,我们都知道,频繁的dom操作是非常耗费性能的,现在ul里边是5个li,我们假如不用事件委托实现上面代码所作的事情,就需要用for循环,给每个li都写一个click事件,这样一来dom操作就比较多了,如果是10个li呢,100个甚至更多呢,单不说dom操作影响的性能,li过多for循环自身就会占用大量的事件。如果利用事件委托,既避免了for循环耗费的性能,又省去了繁多的dom操作耗费的性能。
PS:关于javascript事件说明可参考本站javascript事件与功能说明大全:http://tools.jb51.net/table/javascript_event
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
- 浅析Hadoop大数据分析与应用
- WCF技术剖析之三十三:你是否了解WCF事务框架体系内部的工作机制?[上篇]
- Java豆瓣电影爬虫——小爬虫成长记(附源码)
- Java豆瓣电影爬虫——抓取电影详情和电影短评数据
- 日本科技振兴理事:AI科学家应有红线意识
- Java豆瓣电影爬虫——使用Word2Vec分析电影短评数据
- 实践重于理论——创建一个监控程序探测WCF的并发处理机制
- 分布式科学计算与Docker
- 学习SpringMVC——说说视图解析器
- Java豆瓣电影爬虫——模拟登录的前世今生与验证码的爱恨情仇
- Java豆瓣电影爬虫——减少与数据库交互实现批量插入
- 谈谈C# 4.0新特性“缺省参数”的实现
- 如何实现对上下文(Context)数据的统一管理 [提供源代码下载]
- 不再和人工智能对弈?柯洁:我要食言了
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- php生成微信红包数组的方法
- 解决php写入数据库乱码的问题
- php写入txt乱码的解决方法
- PHP实现的AES 128位加密算法示例
- php写入mysql中文乱码的实例解决方法
- php实现的支付宝网页支付功能示例【基于TP5框架】
- php校验公钥是否可用的实例方法
- PHP实现的微信APP支付功能示例【基于TP5框架】
- php创建多级目录与级联删除文件的方法示例
- Linux VPS定时备份服务器/网站数据到Github私人仓库
- Laravel框架验证码类用法实例分析
- Yii框架常见缓存应用实例小结
- 使用Docker搭建DPlayer视频弹幕接口API后端
- php+jQuery ajax实现的实时刷新显示数据功能示例
- yii2.0框架使用 beforeAction 防非法登陆的方法分析