JavaScript中的事件委托（事件代理）

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

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

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

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

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