JavaScript事件（一）—— 事件流

1.什么是事件

事件是用户或浏览器自身执行的某种动作，
事件是javaScript和DOM之间交互的桥梁。

2.事件流

2.1 对事件流的初步认识

举个简单的例子认识一下事件流

看一下上图，这是三个div，“请点击”这个a标签是最小的div里面的内容，给它绑定了一个click事件，那么我们点击这个a标签时，仅仅只是a元素能感知到这个事件吗？事实是并不是，我们单击一个元素同时也单击了它的父元素，甚至整个页面。
举个具体点的例子，依然是上面的图片，现在给每个div都添加一个事件处理函数，单击不同的div弹出不同的文字，这时候我们仅仅单击最小的div，最大的div也会弹出文字，这就是我们能直观感受到事件流。

2.2 两种事件流模型

2.2.1 冒泡事件流

冒泡事件流：事件传播从指定的事件目标传播到根元素，也就是从DOM树的叶子传递到根。
例如：现在给body里的一个div绑定了click事件，点击div，冒泡事件流的传递顺序示意图如下：

2.2.2 捕获事件流

捕获事件流：事件传播从根元素传播到指定的事件对象，也就是从DOM树的根传播到叶子。
例如：现在给body里的一个div绑定了click事件，点击div，冒泡事件流的传递顺序示意图如下：

2.3 DOM事件流

DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象，从document对象开始，也在document对象结束。
DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
还是以上部分的例子介绍，DOM事件流示意图如下

• 事件捕获阶段：实际目标div在捕获阶段不会接收事件。也就是在捕获阶段，事件传递到body就停止了。也就是1-3的过程
• 处于目标阶段：事件在div上发生并处理。但是事件处理会被看成是冒泡阶段的一部分。
• 冒泡阶段：事件又传播回document。

2.4 事件流的应用之事件代理

2.4.1 什么是事件代理

一般来说，如果我们要添加事件处理器会添加到多个子元素身上，事件代理就是，我们会将事件处理器添加到父元素身上，等待子元素事件冒泡，并且父元素能够通过target判断是哪个子元素，从而做相应处理。

2.4.2 事件代理的好处

• 将多个事件处理器减少到了一个，提高了性能
• 事件代理对不同子元素可采用不同处理方法。如果新增其他子元素，直接修改事件代理的事件处理函数即可，不需要重新绑定处理器