详解事件代理(事件委托)以及应用场景
事件代理(也称事件委托)事件代理,俗地来讲,就是把⼀个元素响应事件 ( click 、 keydown ......)的函数委托到另⼀个元素 前⾯讲到,事件流的都会经过三个阶段: 捕获阶段 -> ⽬标阶段 -> 冒泡阶段,⽽事件委托就是在冒泡阶段完成
事件委托 会把⼀个或者⼀组元素的事件委托到它的⽗层或者更外层元素上,真正绑定事件的是外层元 素,⽽不是⽬标元素 当事件响应到⽬标元素上时,会通过事件冒泡机制从⽽触发它的外层元素的绑定事件上,然后在外层元 素上去执⾏函数
应用场景
如果我们有⼀个列表,列表之中有⼤量的列表项,我们需要在点击列表项的时候响应⼀个事件
<ul id="list"><li>item 1</li><li>item 2</li><li>item 3</li>......<li>item n</li>
</ul>
如果给每个列表项⼀⼀都绑定⼀个函数,那对于内存消耗是⾮常⼤的
// 获取⽬标元素
const lis = document.getElementsByTagName("li")
// 循环遍历绑定事件
for (let i = 0; i < lis.length; i++) {lis[i].onclick = function(e){console.log(e.target.innerHTML)}
}
这时候就可以事件委托,把点击事件绑定在⽗级元素 ul 上⾯,然后执⾏事件的时候再去匹配⽬标元素
// 给⽗层元素绑定事件
document.getElementById('list').addEventListener('click', function (e) {// 兼容性处理var event = e || window.event;var target = event.target || event.srcElement;// 判断是否匹配⽬标元素if (target.nodeName.toLocaleLowerCase === 'li') {console.log('the content is: ', target.innerHTML);}
});
还有⼀种场景是上述列表项并不多,我们给每个列表项都绑定了事件
但是如果⽤户能够随时动态的增加或者去除列表项元素,那么在每⼀次改变的时候都需要重新给新增的 元素绑定事件,给即将删去的元素解绑事件
如果⽤了事件委托就没有这种麻烦了,因为事件是绑定在⽗层的,和⽬标元素的增减是没有关系的,执 ⾏到⽬标元素是在真正响应执⾏事件函数的过程中去匹配的
举个例⼦: 下⾯ html 结构中,点击 input 可以动态添加元素
<input type="button" name="" id="btn" value="添加" />
<ul id="ul1"><li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li>
</ul>
使用事件委托
const oBtn = document.getElementById("btn");
const oUl = document.getElementById("ul1");
const num = 4;
//事件委托,添加的⼦元素也有事件
oUl.onclick = function (ev) {ev = ev || window.event;const target = ev.target || ev.srcElement;if (target.nodeName.toLowerCase() == 'li') {console.log('the content is: ', target.innerHTML);}
};
//添加新节点
oBtn.onclick = function () {num++;const oLi = document.createElement('li');oLi.innerHTML = `item ${num}`;oUl.appendChild(oLi);
};
可以看到,使⽤事件委托,在动态绑定事件的情况下是可以减少很多重复⼯作的
总结:
适合事件委托的事件有: click , mousedown , mouseup , keydown , keyup , keypress 从上⾯应⽤场景中,我们就可以看到使⽤事件委托存在两⼤优点:
- 减少整个⻚⾯所需的内存,提升整体性能
- 动态绑定,减少重复⼯作
但是使⽤事件委托也是存在局限性:
- focus 、 blur 这些事件没有事件冒泡机制,所以⽆法进⾏委托绑定事件
- mousemove 、 mouseout 这样的事件,虽然有事件冒泡,但是只能不断通过位置去计算定位, 对性能消耗⾼,因此也是不适合于事件委托的
如果把所有事件都⽤事件代理,可能会出现事件误判,即本不该被触发的事件被绑定上了事件
详解事件代理(事件委托)以及应用场景相关推荐
- JavaScript事件详解-jQuery的事件实现(三)
正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
- Cesium 事件详解(鼠标事件、相机事件、键盘事件、场景触发事件)
Cesium 事件详解(鼠标事件.相机事件.键盘事件.场景触发事件) 1 Cesium中的事件 根据使用情况,我把Cesium中的事件大体分为三种,即屏幕空间事件处理程序,屏幕空间相机控制器,场景触发 ...
- 太阳动态ip代理为您详解使用代理ip常见的几个关键点及其解决方案
一个ip支撑不了整个爬虫项目的运营,因此程序员常需要建立代理ip池或者与第三方代理ip软件打交道.作为优质的代理ip服务商,太阳动态ip代理为您详解使用代理ip常见的几个关键点及其解决方案. IP检验 ...
- 一文详解Docker 代理脱坑
本文转载自:一文详解Docker 代理脱坑 Docker 代理配置 由于公司 Lab 服务器无法正常访问公网,想要下载一些外部依赖包需要配置公司的内部代理.Docker 也是同理,想要访问公网需要配置 ...
- 详解nginx代理天地图做缓存解决跨域问题
这篇文章主要介绍了详解nginx代理天地图做缓存解决跨域问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 作为一个GISer开发者,天地图是经常在项目中以底图的形式出现 ...
- 算法:详解布隆过滤器的原理、使用场景和注意事项@知乎.Young Chen
算法:详解布隆过滤器的原理.使用场景和注意事项@知乎.Young Chen 什么是布隆过滤器 本质上布隆过滤器是一种数据结构,比较巧妙的概率型数据结构(probabilistic data struc ...
- python函数的使用场景_详解python中strip函数的使用场景
python strip()函数 介绍,需要的朋友可以参考一下 函数原型 声明:s为字符串,rm为要删除的字符序列 s.strip(rm) 删除s字符串中开头.结尾处,位于 rm删除序列的字符 s.l ...
- redis watch使用场景_详解redis中的锁以及使用场景
分布式锁 什么是分布式锁? 分布式锁是控制分布式系统之间同步访问共享资源的一种方式. 为什么要使用分布式锁? 为了保证共享资源的数据一致性. 什么场景下使用分布式锁? 数据重要且要保证一致性 ...
- JS事件详解和js事件委托
简述事件 事件起始于IE3,作为一种分担服务器运算负载的一种手段.用于键盘.鼠标等工具对于网页的交互!事件对于不同浏览器来说,有不同的标准,尤其是IE.Chrome两大巨头浏览器上,虽然现如今Chro ...
- JavaScript事件代理和委托
2019独角兽企业重金招聘Python工程师标准>>> 浏览器的事件冒泡 当事件发生后,这个事件就要开始传播.例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身不能处 ...
最新文章
- 操作系统级虚拟化概述
- 第三篇T语言实例开发,图色操作
- 监管大屏系统_工厂大屏可视化管控系统,智慧工厂平台是什么,工厂管理大屏软件 - 帆软...
- sublime-text3 安装 emmet 插件
- uwsgi+django在ubuntu下命令部署亲测ok
- 笔记下UltraEdit的一些常用使用技巧
- 有趣的检查边界面试题
- 字典树Trie练习 HihoCoder 1014
- C语言程序设计谭浩强第五版复习梳理3
- After Effect弹性表达式的用法
- 一款你不容错过的Laravel后台管理扩展包 —— Voyager – Laravel学院
- 传感器 动态误差计算
- 斐讯k2 怎么开虚拟服务器,求助各位大神,K2P怎么开启SSH
- EasyExcel 固定(冻结)单元格
- ca42a_demo_c++_new_delete表达式
- 持续学习:(Elastic Weight Consolidation, EWC)Overcoming Catastrophic Forgetting in Neural Network
- 禅道和xxd(喧喧)两台主机服务器采坑记!
- SublimeLinter
- 黑苹果0005——我的config文件(笔记本 intel HD630)
- 王爽 汇编语言第二版 课程设计2
热门文章
- 如何在div中设置背景图片并且自适应div大小
- 以下Java的标识符不合法_(2-1)以下是不合法的Java自定义标识符。
- 2023年湖北七大员有哪几种?证书全国通用吗?秋禾火
- Shader smoothstep实现线条渐变色
- (在客户端)https抓包解密
- 测绘涉密证怎么办理,有什么作用?想办理测绘资质,测绘涉密证必不可缺!简单介绍几种吧,看看有没有你们适用的
- java hive建表_java jdbc 操作 hive 建表 load 数据
- 微信小程序——利用java后台解析Excel文件的数据
- 如何给女朋友解释为什么Java不支持多继承?
- C# OpenCV人脸检测(三) DNN加载FaceDetectorYN模型做人脸检测