JS-Learning | 事件冒泡、事件捕获以及事件委托
想要了解事件冒泡、事件捕获以及事件委托的概念，我们需要先了解一下什么是事件流。
事件流
事件流描述的是从页面中接收事件的顺序。
比如说，如果你单击了某个按钮，我们则认为在单击按钮的同时，你也单击了按钮的容器元素，甚至也单击了整个页面。IE和Netscape开发团队就提出了两个完全相反的事件流的概念。IE的事件流是事件冒泡流，而Netscap Communicator的事件流是事件捕获流。
事件冒泡
事件冒泡，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="myDiv>Click Me</div>
</body>
</html>
如果你单击了页面中的<div>元素，那么这个click事件会按照如下顺序传播：
1.<div>
2.<body>
3.<html>
4.document
下图展示了事件冒泡的过程。
click事件就沿着DOM树向上传播，在每一级节点都会发生，直至传播到document对象。
事件捕获
事件捕获的思想则是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。
以前面的HTML页面为例，单击页面中的<div>元素就会以下列顺序触发click事件：
1.document
2.<html>
3.<body>
4.<div>
下图展示了事件捕获过程。
在事件捕获过程中，document对象首先接收到click事件，然后事件沿DOM树依次向下，一直传播到事件的实际目标，即<div>元素。
DOM事件流
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
以前面的HTML页面为例，单击<div>元素会按照下图所示顺序触发事件。
在DOM事件流中，实际的目标在捕获阶段不会接收到事件。这意味着在捕获阶段，事件从document到<html>再到<body>后就停止了。下一阶段是“处于目标”阶段，于是事件在<div>上发生，并在事件处理中被看成冒泡阶段的一部分。然后，冒泡阶段发生，事件又传播回文档。
事件委托
事件委托是一种对“事件处理程序过多”问题的解决方案。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如，click事件会一直冒泡到document层次。也就是说，我们可以为整个页面指定一个onclick事件处理程序，而不必给每个可单击的元素分别添加事件处理程序。
我们可以为document对象添加一个事件处理程序，用以处理页面上发生的某种特定类型的事件。这样做有以下几点优点：
- document对象很快就可以访问，而且可以在页面生命周期的任何时点上为它添加事件处理程序。
- 在页面中设置事件处理程序所需的时间更少。只添加一个事件处理程序所需的DOM引用更少，所花的时间也更少。
- 整个页面占用的内存空间更少，能够提升整体性能。
最适合采用事件委托技术的事件包括click、mousedown、mouseup、keydown、keyup 和 keypress。