JavaScript事件流

什么是JS事件流

　　早期的IE事件传播方向为由上至下，即从document逐级向下传播到目标元素；而Netscape公司的Netscape Navigator则是朝相反的方向传播，

也就是从目标元素开始向上逐级传播最终至window。

　　后来ECMAScript在DOM2中对事件流进行了进一步规范，基本上就是上述二者的结合。当事件发生时，最先得到通知的是window，然后是document，由上至下逐级依次而入，直到真正触发事件的那个元素(目标元素)为止，这个过程就是捕获。接下来，事件会从目标元素开始起泡，由下至上逐级依次传播，直到window对象为止，这个过程就是冒泡。

　　如果我们有下面的HTML代码结构

 <div class="box" id="box2">

             <div class="box" id="box3">

                 <div class="box" id="box4">

                     <div class="box" id="box5">

                         <div class="box" id="box6">

                             <h3>点我开始!!</h3>

                         </div>

                     </div>

                 </div>

             </div>

         </div>

　　那么当我们点击box6中的HE以后，事件的触发过程也就是这样的：

　　　　2.DEMO实例

　　　　我在Gitbub上放了一个DEMO用于演示JS事件的传播原理，大家感兴趣的话可以前往查看。

　　　　http://xiaoyunchen.github.io/JavaScriptEvent/

　　　　打开页面后点击中央的"点我开始"，也就是从最里层触发click事件，然后页面将演示事件是如何进行捕获和冒泡两个阶段的传播的。

　　　　同样在浏览器控制中也可以清楚的看出了JS事件的传播过程：

　　　　哦对了，代码源码放在了 https://github.com/xiaoyunchen/JavaScriptEvent 感兴趣的同学可以自行前往查看。

　　　　3.有何用处

　　　　了解了JS事件流的传播原理，那么对我们的实际开发过程中有什么作用呢？

　　　　首先来看DOM2添加事件的方法申明：

element.addEventListener(event, function, useCapture);

/*

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

*/

　　也就是说我们可以控制是在冒泡还是捕获阶段去处理事件，但是由于考虑浏览器兼容性的问题，这里一般我们都只是用false即冒泡阶段。

　　另外，根据事件的冒泡原理，我们还可以实现另外一个很重要的功能：事件委托。

　　比如我们上面的代码中，有很多元素都需要添加事件，按照之前的做法，我们需要去依次获取每个元素，然后再为每个事件添加上监听事件，

　　但是这样会带来一些问题：

　　1.多次操作DOM获取元素，势必会降低浏览器处理性能

　　2.事件不具有继承性，如果我们动态在页面中添加了一个元素，那么还需要重新走一遍上述程序为其添加监听事件

　　好在我们通过JS事件的冒泡原理来解决上述问题：我们只监听最外层的元素，然后在事件函数中根据事件来源进行不同的事件处理。

　　这样的话，我们添加事件监听时只需要操作一个元素，极大的降低了DOM访问，同时也方便的监听事件的移除。而且就算动态在页面添加一个元素时，也不用

　　重复为其添加监听事件，因为它的事件会自动冒泡到外层被我们给截获。（这也是jquery中时间绑定的实现原理。）

　　4.事件委托DEMO

　　同样的，我创建了一个简单的DEMO用于样式事件委托：　http://xiaoyunchen.github.io/JavaScriptEvent/delegate.html

　　在这个页面中，我们创建了两个列表，然后在两个列表的父级添加了一个事件委托，拦截了列表元素的所有click事件。

　　当我们点击两个列表的任何列表元素时，事件都能得到正确的响应，在控制台打印出对应的元素ID值，

　　当然哪怕是我们后台动态添加的li元素，不用再为其单独绑定事件，也可以得到正确的响应，这就是JS事件委托的作用。

　　（注意，并不是所有事件都支持事件委托，比如mouseover，mouseout等就不支持事件委托。）

　　测试DEMO的源码同样放在了 https://github.com/xiaoyunchen/JavaScriptEvent 感兴趣的同学可以自行前往查看。

　　小结：

　　　　JavaScript中的事件流分为捕获阶段、目标阶段、冒泡阶段，我们可以JS控制需要操作捕获还是冒泡阶段的事件。

　　　　根据事件流的原理，我们可以优化事件处理方法，比如进行事件委托。