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
上一篇: EL表达式