浅谈JavaScript的事件(事件委托)
事件处理程序为Web程序提供了系统交互,但是如果页面中的事件处理程序太多,则会影响页面的性能。每个函数都是对象,都会占用内存,内存中对象越多,性能越差。需要事先为DOM对象指定事件处理程序,导致访问DOM的次数增多,会延迟整个页面的交互就绪时间。
- 事件委托
对事件处理程序过多的解决方案是使用事件委托。事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。比如click事件会一直冒泡到document,也就是说我们只需为整个页面指定一个onclick事件处理程序,而不必为每个需要点击事件的元素单独添加。
1 <ul id="ul1">
2 <li id="li1">111</li>
3 <li id="li2">222</li>
4 </ul>
例如上面的代码,如果我们采用常规手段来添加事件处理程序,我们需要为每个li都添加事件。但是如果采用冒泡,我们只需要指定一个事件处理程序,并且能够实现同样的功能。
1 var oUl = document.getElementById("ul1");
2 EventUtil.addEvent(oUl, "click", function(ev) {
3 var ev = EventUtil.getEvent(ev);
4 var target = EventUtil.getTarget(ev);
5 if(target.id == 'li1') {
6 console.log("1");
7 }
8 else if(target.id=="li2"){
9 console.log("2");
10 }
11 });
上面的代码中,通过事件冒泡为ul1指定了事件处理程序,在我们单击li的时候通过事件冒泡也会触发该事件,并且能够通过target来获取当前单击的元素对象。通过元素id,为每个元素执行不同的if语句。
并不是所有的事件都适合使用事件委托,比较适用的事件是:mouseup、mousedown、click、keyup、keydown和keypress。虽然mouseover和mouseout也支持事件冒泡,但是如果使用事件委托则处理就比较麻烦,而且需要计算鼠标的位置以及元素的位置(当鼠标从一个元素移到其子节点,或者移出元素都会触发mouseout事件)。
1 var oUl = document.getElementById("ul1");
2 EventUtil.addEvent(oUl, "mouseout", function(ev) {
3 var ev = EventUtil.getEvent(ev);
4 var target = EventUtil.getTarget(ev);
5 if(target.id == 'li1') {
6 console.log("1");
7 }
8 else if(target.id=="li2"){
9 console.log("2");
10 }
11 });
比如上面的代码,当鼠标移到li元素的时候会触发mouseout,鼠标移出ul元素的时候也会触发mouseout事件。
- 移除事件处理程序
前文已经讲过事件的添加以及事件的移除。对于页面的事件处理程序太多,会影响页面的性能,除了使用事件委托之外,还可以将一些事件移除。内存中留有的一些过时的用不到的事件处理程序也是造成Web页面和内存性能的主要问题。
我们移除页面中的元素时候,可以通过removeChild和replaceChild方法,但有时候也会使用innerHTML来替换元素。如果某个元素有事件处理程序,通过innerHTML来替换,则事件处理程序依然存在,那么该事件处理程序已经使用不到,但是它也无法被回收,会一直占用内存空间。
1 <div id="firstdiv">
2 <input type="button" id="btnadd" value="添加" />
3 </div>
1 EventUtil.addEvent(document.getElementById("btnadd"),"click",function(event){
2 document.getElementById("firstdiv").innerHTML="processing";
3 });
上面的代码中为btnadd元素绑定了单击事件,单击的时候通过innerHTML移除了该元素,但是元素的事件处理程序并没有移除,依然留在内存中。
1 var callback =function(event){
2 EventUtil.removeEvent(document.getElementById("btnadd"),"click",callback);
3 document.getElementById("firstdiv").innerHTML="processing";
4 }
5 EventUtil.addEvent(document.getElementById("btnadd"),"click",callback);
上面的代码,我们在元素移除之前,手动移除了元素的事件处理程序。这样确保内存中也移除了该事件处理程序,而从DOM中移除按钮也非常彻底。
- Java案例-打印九宫格
- 【Go 语言社区】算法课程 第一季 第4节 100以内的素数
- Java案例-数组求余问题
- GO语言实现的端口扫描器分享
- Java案例-数组随机数
- Go语言图片处理和生成缩略图的方法
- Python3 怎么将Unicode转中文,以及GBK乱码ÖйúÉÙÊýÃñ×åÌØÉ«´åÕ¯
- 数据结构和算法——旋转打印链表
- C/C++——set的基本操作总结
- PHP基础——字符串的常用操作
- NLP之tfidf与textrank算法细节对比基于结巴分词
- 【Go 语言社区】算法课程 第一季 第4节-汉诺塔
- C/C++——map的基本操作总结
- Python生成词云图,TIIDF方法文本挖掘: 词频统计,词云图
- 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 数组属性和方法
- Tungsten Fabric知识库丨测试2000个vRouter节点部署
- 一行代码快速图像识别~一排代码搞定视频识别
- Python测试开发django5.urls.py参数name与<a>标签的引用
- Pytest配置文件pytest.ini
- 移植uc/OS-III最新版到小熊派开发板(STM32L431)
- phpStudy默认配置致Nginx解析漏洞复现
- HW|蓝队实战溯源反制手册分享
- 工具开发|Burp插件Unexpected_information
- 爱了!安利一个相见恨晚的可视化学习网站
- pandas+PyQt5轻松制作数据处理工具
- Python高效编程之88条军规(1):编码规范、字节序列与字符串
- 这是一份 pip 常用命令小结~
- 太震撼了,我用python画出全北京的公交线路动图
- 小伙Python爬虫并自制新闻网站,太好玩了
- TRTC Android端开发接入学习之视频会议(八)