Javascript的事件冒泡与事件捕捉

1、什么是事件冒泡，什么是事件捕捉？

无论是事件冒泡还是事件捕捉，都是他们是描述事件触发时序问题的术语，即两者都为事件流。
- 事件冒泡：是指从触发事件的DOM节点开始一直传播到document节点，即是一种从下到上的传播方式。
- 事件捕捉：是指从文档节点document到触发事件的DOM节点，即是一种从上到下的事件传播方式。

在对节点绑定事件的方法的第三个参数如果为true，则为事件捕捉，当为false时，则为事件冒泡（默认的是事件冒泡，为false）。

2、简单实例理解

（1）事件冒泡
html代码：

<div id="first" style="border: 1px solid #F00; width: 400px;height: 200px; ">
        <div id="second" style="border: 1px solid #F00; width: 200px;height: 100px; ">
            <div id="third" style="border: 1px solid #F00; width: 100px;height: 50px; ">
                <button id="button">事件冒泡</button>
            </div>
        </div>
    </div>
    <div class="eventOrder">
        <p>事件冒泡执行顺序：</p>
    </div>

javascript+Jquery代码：
对每个节点都绑定click事件。

//事件冒泡：默认false  
document.getElementById("button").addEventListener("click",function(){
           $('.eventOrder').append(this.id+'->');
        },false);

        document.getElementById("third").addEventListener("click",function(){
           $('.eventOrder').append(this.id+'->');
        },false);

        document.getElementById("second").addEventListener("click",function(){
           $('.eventOrder').append(this.id+'->');
        },false);        

        document.getElementById("first").addEventListener("click",function(){
            $('.eventOrder').append(this.id);
        },false);

结果为：

（2）事件捕捉

html代码：

<div id="first" style="border: 1px solid #F00; width: 400px;height: 200px; ">
        <div id="second" style="border: 1px solid #F00; width: 200px;height: 100px; ">
            <div id="third" style="border: 1px solid #F00; width: 100px;height: 50px; ">
                <button id="button">事件捕捉</button>
            </div>
        </div>
    </div>
    <div class="eventOrder">
        <p>事件捕捉执行顺序：</p>
    </div>

javascript+jquery代码：

    //事件捕捉：事件委托的第三个参数为true
        document.getElementById("button").addEventListener("click",function(){
            $('.eventOrder').append('->'+this.id);
        },true);

        document.getElementById("third").addEventListener("click",function(){
           $('.eventOrder').append('->'+this.id);
        },true);

        document.getElementById("second").addEventListener("click",function(){
           $('.eventOrder').append('->'+this.id);
        },true);        

        document.getElementById("first").addEventListener("click",function(){
            $('.eventOrder').append(this.id);
        },true);

结果为：

3、阻止事件冒泡与捕捉

有时候我们想要的事件执行顺序与实际执行的不同，这时候就需要对其阻止。
（1）stopPropagation方法阻止。
stopPropagation()即可以阻止事件冒泡，也可以阻止事件捕获
例如需要在second处阻止冒泡的发生，不会向父节点继续冒泡

  document.getElementById("second").addEventListener("click",function(e){

           $('.eventOrder').append(this.id+'->'+'阻止成功');
           e.stopPropagation();
        },false);        

阻止成功到 了second，不会再继续到first

例如需要在second处阻止捕获的发生，不会向其后代节点继续捕获。

document.getElementById("second").addEventListener("click",function(e){

           $('.eventOrder').append('->'+this.id+'->'+'阻止成功');
           e.stopPropagation();
        },true);   

结果为：

（2）stopImmediatePropagation方法阻止
stopImmediatePropagation不仅可以阻止事件冒泡与捕获，还可以阻止该DOM节点上的同类事件发生执行，也就是阻止的同类事件在相同的DOM节点发生，阻止的很彻底。

   document.getElementById("second").addEventListener("click",function(e){
            alert("我是绑定在second上的第一个事件");
           $('.eventOrder').append(this.id+'->'+'阻止成功');
           e.stopImmediatePropagation();
        },false); 
        document.getElementById("second").addEventListener("click",function(e){
            //这里的callback将不会发生，stopImmediatePropagation阻止了second节点上同类click事件的发生
            alert("我是绑定在second上的第二个事件");
           //e.stopImmediatePropagation();
        },false);          

alert（“我是绑定在second上的第二个事件”）不会发生，也就是整个回调函数与事件不会发生。

4、DOM事件流介绍

（1）什么是DOM事件流？
事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流。主要分为两种事件流，即上面提及到的冒泡型事件流与捕获型事件流。

（2）DOM事件流的三个阶段

• 捕获阶段：事件从文档的根节点出发，随着DOM树的结构向事件的目标节点流去。途中经过各个层次的DOM节点，并在各节点上触发捕获事件，直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径，在冒泡阶段，事件会通过这个路径回溯到文档跟节点。即图中1->2->3阶段
• 目标阶段：当事件到达目标节点的，事件就进入了目标阶段。事件在目标节点上被触发，然后会逆向回流，直到传播至最外层的文档节点。即图中4阶段
• 冒泡阶段：事件在目标元素上触发后，并不在这个元素上终止。它会随着DOM树一层层向上冒泡，直到到达最外层的根节点。也就是说，同一个事件会依次在目标节点的父节点，父节点的父节点以此类推，直到最外层的节点上被触发。即图中5->6->7阶段。

（3）关于DOM事件流的注意点

• 尽管目标阶段是单独独立出来的，但是在实际的事件捕获阶段会触发目标阶段，同理冒泡事件也是从目标阶段开始。
• 并非所有的事件都会经过捕获阶段、目标阶段、冒泡阶段。