JS事件冒泡详解

重温js，对于js的事件处理机制再一次做一个总结，今天特地上网找了好多博客学习了一下，在此做个笔记，也供大家学习。大致内容与以前写过的一篇一致，部分细节不同。

一、 事件流：
标准的事件流分为三个阶段：
事件捕获阶段，处理目标阶段，事件冒泡阶段
IE的事件流分为两个阶段：
处理目标阶段，事件冒泡阶段

我们从一张图片开始说起（在网上找到的）

事件流

这里假设给div绑定了一个onclick事件，当我们点击div时，实际上是先点击document，然后逐层向下捕获事件，捕获到div有一个点击事件，开始进行事件源处理，处理完成后，继续向下，直到没有子节点，此时，开始执行事件冒泡阶段，从最后一层子节点，逐层向上冒泡，最后传递给document。
举个例子说明：

<div id="box1">
    <div id="box2"></div>
</div>

<style type="text/css">
        #box1 {
            width: 300px;
            height: 300px;
            background-color: red;
        }

        #box2 {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>

    function $(id) {
        return document.getElementById(id);
    }

    // 点击box2会继续弹出box1及body，这是冒泡造成的，所以要阻止冒泡
    $("box2").onclick = function (e) {
        var e = e || window.event;
//        if (e.stopPropagation) {
//            e.stopPropagation();
//        } else {
//            e.cancelable();
//        }
        alert("box2");
    }
    $("box1").onclick = function (e) {
        var e = e || window.event;
//        if (e.stopPropagation) {
              // 非IE
//            e.stopPropagation();
//        } else {
             // IE
//            e.cancelBubble();
//        }
        alert("box1");
    }
    document.body.onclick = function () {
        alert("body");
    }

此时，我注释掉了阻止冒泡事件的代码，当点击box2时，会弹出box2，box1，body，这就是冒泡机制造成的，显然，我们并不希望此种情况的发生，所以，需要进行，阻止冒泡。
代码中，注释掉的部分就是阻止事件冒泡的方法。

当然，冒泡机制，是指同一事件，例子中是onclick，如果把box2的事件改为onmouseover，则不会产生冒泡行为，但，box1与body的事件仍为onclick，所以点击box1，仍会继续弹出body。

如有不对的地方，希望大家积极指正