JavaScript给事件委托批量添加事件监听详细流程
更新时间：2021年10月19日 11:29:07 作者：daixiangcn
事件委托，一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数
1.什么是事件委托
事件委托：利用事件冒泡的特性，将本应该注册在子元素上的处理事件注册在父元素上，这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应。这样做的优势有：
- 减少DOM操作，提高性能。
- 随时可以添加子元素，添加的子元素会自动有相应的处理事件。
2.事件委托的原理
事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件。
举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。
3.事件委托的实现
通过一个案例来实现事件委托。
案例：批量添加事件监听。使用JavaScript实现：点击哪个li，哪个li元素的背景变红。
结构层+样式层代码：
<style>
* {
margin: 0;
padding: 0;
}
ul {
float: left;
width: 800px;
margin-top: 50px;
}
ul li {
list-style: none;
float: left;
width: 200px;
height: 200px;
border: 1px solid #000;
margin-right: 20px;
}
ul li:first-child {
margin-left: 20px;
}
</style>
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
3.1 方法1：循环添加事件
不使用事件委托，使用for循环添加点击事件，内存消耗大。
var oList = document.getElementById('list');
var lis = oList.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
this.style.backgroundColor = 'red';
}
}
3.2 方法2：使用事件委托
使用事件委托。
var oList = document.getElementById('list');
oList.onclick = function (e) {
e.target.style.backgroundColor = 'red';
}
该案例中，e.target表示用户真正点击到的那个元素。
到此这篇关于JavaScript给事件委托批量添加事件监听详细流程的文章就介绍到这了,更多相关JavaScript 事件委托内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了微信小程序实现上拉加载功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
本文主要介绍了JavaScript 事件对内存和性能的影响。具有很好的参考价值，下面跟着小编一起来看下吧2017-01-01
JavaScript实现iframe自动高度调整和不同主域名跨域
这篇文章主要介绍了JavaScript实现iframe自动高度调整和不同主域名跨域,作者通过建立一个代理来同步高度调整,需要的朋友可以参考下2016-02-02
获取图片尺寸(不设置宽高)及放大图片：利用了IE的私有属性防止图片放大失真严重！感兴趣的朋友可以参考下2013-09-09
ie中用close关闭非open打开的窗口时回弹出一个对话框询问用户，怎么去掉这个框呢，在window.close之前加上window.top.opener = null就可以了2014-09-09
这篇文章主要为大家详细介绍了纯js实现打字机效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
定时器顾名思义就是在某个特定的时间去执行一些任务，现代的应用程序早已不是以前的那些由简单的增删改查拼凑而成的程序了，高复杂性早已是标配，而任务的定时调度与执行也是对程序的基本要求了。本文将利用JavaScript手写原生任务定时器，需要的可以参考一下2022-03-03
使用onmouseover和onmouseout事件实现不同的效果而且是使用js动态实现，本文有利于巩固你js与css方面的知识，感兴趣的你可以了解下哦，希望本文对你有所帮助2013-01-01
这篇文章主要为大家详细介绍了js实现拖动滑块效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要为大家介绍了提高团队代码质量利器ESLint及Prettier使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
最新评论