今天我们来了解什么是事件委托，事件委托使我们向父元素绑定一个事件处理程序即可，而无需向子元素绑定多个事件。
通过事件捕获和冒泡使我们实现最强大的事件处理模式，——事件委托。
什么是事件委托
假设我们有一个列表
<ul id="menu">
<li><a id="home">首页</a></li>
<li><a id="dashboard">工作台</a></li>
<li><a id="report">统计</a></li>
</ul>
要给每个菜单项添加点击事件，我们要找到每个菜单元素，然后绑定事件
let home = document.querySelector('#home');
home.addEventListener('click',(event) => {
console.log('点击首页');
});
let dashboard = document.querySelector('#dashboard');
dashboard.addEventListener('click',(event) => {
console.log('点击工作台');
});
let report = document.querySelector('#report');
report.addEventListener('click',(event) => {
console.log('点击统计');
});
在JavaScript中，如果一个页面上有大量的事件绑定，会影响到页面性能，原因如下：
- 每个事件处理程序都是一个函数，它也是一个占用内存的对象。 内存中的对象越多，性能越慢。
- 绑定所有事件处理程序需要时间，会导致页面交互产生延迟卡顿。
为了解决这个问题，我们可以利用事件冒泡。
我们可以绑定一个事件来处理所有点击事件，而不是绑定多个事件：
let menu = document.querySelector('#menu');
menu.addEventListener('click', (event) => {
let target = event.target;
switch(target.id) {
case 'home':
console.log('点击首页');
break;
case 'dashboard':
console.log('点击工作台');
break;
case 'report':
console.log('点击统计');
break;
}
});
工作原理：
-
当我们点击带有id属性的
<a>元素时，点击事件会冒泡到<ul>的父元素上。所以我们给父元素上绑定一个点击事件来捕获每个子元素的点击事件，而不用给每个<a>元素绑定事件。 -
在父元素点击事件中，我们使用
event.target属性来得到实际点击元素，所以我们可以直接使用target.id来访问其id属性。 -
得到
id属性我们就可以根据其执行不同的逻辑。
这种处理太多事件绑定的方式一般被称为事件委托、事件代理。
一般在面试中事件委托也是一个基础必考题。
事件委托优点
假如我们给 document 绑定一个事件，那么所有事件都会冒泡到这个事件，那么将会有以下的优点：
- 更少内存占用，更好的性能
document对象可用。只要元素被渲染，它就可以立即正常点击。不需要等待DOMContentLoaded或load事件。
最后
一起学习更多前端知识，微信搜索【小帅的编程笔记】，每天更新