JavaScript给事件委托批量添加事件监听的方法是什么

本篇内容介绍了“JavaScript给事件委托批量添加事件监听的方法是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

10年积累的做网站、网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站策划后付款的网站建设流程，更有牡丹免费网站建设让你可以放心的选择与我们合作。

1.什么是事件委托

事件委托：利用事件冒泡的特性，将本应该注册在子元素上的处理事件注册在父元素上，这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应。这样做的优势有：

• 减少DOM操作，提高性能。

• 随时可以添加子元素，添加的子元素会自动有相应的处理事件。

2.事件委托的原理

事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件。
举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

3.事件委托的实现

通过一个案例来实现事件委托。
案例：批量添加事件监听。使用JavaScript实现：点击哪个li，哪个li元素的背景变红。

结构层+样式层代码：

	
    	
1
    	
2
    	
3
	

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给事件委托批量添加事件监听的方法是什么
转载注明：http://6mz.cn/article/jhgdcp.html