捕获和冒泡允许我们实现一种被称为 事件委托 的强大的事件处理模式。
如果我们有许多以类似方式处理的元素，那么就不必为每个元素分配一个处理程序 —— 而是将单个处理程序放在它们的共同祖先上。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
border: 1px solid red;
}
tr{
/* position: relative; */
width: 300px;
height: 60px;
/* background: grey; */
border: 1px solid blue;
}
td{
width: 60px;
height: 60px;
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
代码实现的表格有 9 个单元格（cell），也可以有 99 个或 9999 个单元格，这都不重要。
我们的任务是在点击时高亮显示被点击的单元格 <td>。
与其为每个 <td>（可能有很多）分配一个 onclick 处理程序 —— 我们可以在 <table> 元素上设置一个“捕获所有”的处理程序。
它将使用 event.target 来获取点击的元素并高亮显示它。
<script>
var oTr = document.querySelectorAll('table');
console.log(oTr);
oTr[0].addEventListener('click',function(e){
if(e.target.style.background) {e.target.style.background = '';}
else{
e.target.style.background = 'black';
}
},false)
</script>
自己试试，是不是感觉很棒，我感觉这可以用在好多web小游戏上了。
事件委托是 DOM 事件最有用的模式之一。
它通常用于为许多相似的元素添加相同的处理。
事件委托用法：
- 在容器（container）上放一个处理程序。
- 在处理程序中 —— 检查源元素
event.target。
- 如果事件发生在我们感兴趣的元素内，那么处理该事件。
事件委托的好处：
-
简化初始化并节省内存：无需添加许多处理程序。
- 更少的代码：添加或移除元素时，无需添加/移除处理程序。
- DOM 修改 ：我们可以使用
innerHTML 等，来批量添加/移除元素
