事件冒泡 vs 事件捕获

什么是事件冒泡

微软提出了名为事件冒泡的事件流，事件会从最内层的元素开始发生，一直向上传播，直到根节点
举例说一下吧：

<div id="one" style="height: 100px; width: 100px;background-color: red">
    <div id="two" style="height: 80px; width: 80px;background-color: orange">
        <button id="three">点我</button>
    </div>
</div>

我这里有两个div嵌套，最里面放一个button，那么我们给它们都加一个事件：

$("#one").click(function () {
        console.log("我是最外面的div");
 });
$("#two").click(function () {
        console.log("我是中间的div");
 });
 $("#three").click(function () {
       console.log("我是最里面的button");
 })

那么当我点击这个button按钮的时候，显示如下：

当我点击中间橙色部分的时候显示如下：

相信大家已经看出来了，我点击了最里面的button，我的事件执行顺序从button到中间的div直至最外面的div，当我点击中间div的时候，先执行中间的div再执行外面的div，这就是事件冒泡，事件按照DOM的层次结构像水泡一样不断向上直至顶端

什么是事件捕获

事件捕获刚好与事件冒泡相反，事件捕获是从最顶端往下开始触发，但是jQuery不支持事件捕获，所以得使用原生JavaScript，就使用刚才的例子：

    var one = document.getElementById("one");
    var two = document.getElementById("two");
    var three = document.getElementById("three");
    one.addEventListener("click",function(e){
        console.log("我是最外面的div");
    },true);          //如果是false，就是事件冒泡
    two.addEventListener("click",function(e){
        console.log("我是中间的div");
    },true);
    three.addEventListener("click",function(e){
        console.log("我是最里面的button");
    },true);

当我点击按钮的时候，我的事件执行顺序和刚才的事件冒泡就刚好相反，从外面的div到中间的div再到最里面的button

停止事件冒泡和事件捕获

停止事件冒泡和事件捕获可以阻止事件中其他对象的事件处理函数被执行，w3c 的方法是 e.stopPropagation()，IE 则是使用 e.cancelBubble = true，就上述例子进行说明，在点击事件里面加一句就可以了，比如说button的点击事件：

$("#three").click(function (event) {
       console.log("我是最里面的button");
       event.stopPropagation();    //  IE中可以使用event.cancelBubble = true
   })

我可以将e.stopPropagation()改为return false，同样可以阻止事件冒泡和捕获