欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript中的事件委托(事件代理)

程序员文章站 2022-06-22 11:53:44
说到事件委托,其实它主要是为了达到优化代码、提高性能的一种基于事件冒泡的方式。(至于事件冒泡,大家可以翻我博客,对事件捕获和事件冒泡都做了详细的介绍。)大家先来看这样的一个例子:项目经理有一个需求,需要指出⽤⼾在表格中单击的是哪⼀个单元格,可以将所有的单元格背景⾊设置为⽩⾊,当单击单元格时,将被单击的单元格设置为⻩⾊。按照正常的逻辑思维,我们都是在每个单元格上添加单击事件处理函数。例子如下:const cells = document.querySelectorAll('td');for (let...

说到事件委托,其实它主要是为了达到优化代码、提高性能的一种基于事件冒泡的方式。(至于事件冒泡,大家可以翻我博客,对事件捕获和事件冒泡都做了详细的介绍。)

大家先来看这样的一个例子:

项目经理有一个需求,需要指出⽤⼾在表格中单击的是哪⼀个单元格,可以将所有的单元格背景⾊设置为⽩⾊,当单击单元格时,将被单击的单元格设置为⻩⾊。

按照正常的逻辑思维,我们都是在每个单元格上添加单击事件处理函数。例子如下:

const cells = document.querySelectorAll('td');
for (let n = 0; n < cells.length; n++) {
	cells[n].addEventListener('click', function(){
		this.style.backgroundColor = 'yellow';
	});
}

假如说,你这个表格有100个单元格,按照这种方式就需要添加100个点击事件!这种方式大大降低了性能!

让我们再来看看用事件委托的这种方式。例子如下:

const table = document.getElementById('someTable');
table.addEventListener('click', function(event){
	//当且仅当单击事件发⽣在cell元素上,才执⾏动作(⽽不是随机的后代元素)
	if (event.target.tagName.toLowerCase() === 'td') {
		event.target.style.backgroundColor = 'yellow';
	}
});

采取事件委托这种方式,只需要给目标元素的祖先元素添加一个点击事件即可。相较于原来那种方式,优劣立判!

这里需要提醒一下,event.target指向事件发生的那个元素。不懂的话大家可以翻我博客,有详细介绍。

本文地址:https://blog.csdn.net/qq_35294985/article/details/109378566