javascript事件流

听过冒泡吗，听过捕获吗，是否会觉得很熟悉，但是让你具体的回答，却又说不上什么所以然。

w3c约定的事件触发分为三个阶段，顺序为捕获阶段，目标阶段，冒泡阶段

捕获阶段时，先触发最上层父元素的捕获阶段绑定函数，即从外层到里层先触发，直至到达目标元素,进入目标阶段

目标阶段时，按照绑定顺序触发目标元素的绑定函数，结束后，进入冒泡阶段

冒泡阶段时，触发上一级父元素的冒泡阶段绑定函数，即从里层到外层触发，

target.addEventListener(name,handle,useCapture)
userCapture为true时，表示在捕获阶段触发
userCapture为false时，表示在冒泡阶段触发

event.stopPropagation() 
该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点

实例：

// html 片段

        

            

        


// js 代码
var oDvi1 = document.getElementById('div1'),
    oDvi2 = document.getElementById('div2'),
    oDvi3 = document.getElementById('div3');

oDvi1.addEventListener('click', handle1, true);
oDvi2.addEventListener('click', handle2, false);
oDvi3.addEventListener('click', handle3, true);


function handle1(){ //蓝
    alert(123);
}

function handle2(){ //红
    alert(345);
}

function handle3(){//黄
    alert(456);
}

点击div3,结果为123，456，345，总结：
捕获阶段：外=》里，在div1出检测useCapture 是否为true,是则触发函数，div2同理，
目标阶段：发现div3就是鼠标点击的阶段，所以进入目标阶段，对于目标元素的所有回调，按照绑定顺序执行。执行完毕，进入冒泡阶段
冒泡阶段：里=》外，在div2出检测useCapture是否为false,是则执行，div1同理

或许下面这个例子更能说明这一点:

运行结果如图：

运行结果.png