事件流

DOM事件流：

　　点击按钮，其实最先触发的是window被点击，层层传递下去，捕获阶段结束后再到目标阶段最后是冒泡阶段（目标阶段属于冒泡阶段一部分）。

　　对于DOM0级的事件流来说，可以看成是冒泡阶段。DOM2级可以指定是捕获还是冒泡阶段。

 

　DOM2方式可以为同个元素添加多个事件处理程序，如果希望只执行一个，其他的不要执行可添event.stopImmediatePropagation()到可执行的事件中去，该方法还会的阻止捕获或冒泡（这点同stopPropagation()同）。

 

<div id="first">
    <div id="second">
        <button id="button">冒泡</button>
    </div>
</div>
<script>
    var button = document.getElementById("button");
    var second = document.getElementById("second");
    var first = document.getElementById("first");
    var body = document.body;
    var html = document.documentElement;

    // 冒泡阶段（button——>window)
    button.addEventListener("click", function () {
        console.log("button");
    }, false);

    second.addEventListener("click", function () {
        console.log("second");
    }, false);

    first.addEventListener("click", function () {
        console.log("first");
    }, false);

    body.addEventListener("click", function() {
        console.log("body");
    }, false);

    html.addEventListener("click", function () {
        console.log("html");
    }, false);

    window.addEventListener("click", function () {
        console.log("window");
    }, false);

    // 捕获阶段（window——>button)
    button.addEventListener("click", function () {
        console.log("button");
        console.log("------冒泡开始------");
    }, true);

    second.addEventListener("click", function () {
        console.log("second");
    }, true);

    first.addEventListener("click", function () {
        console.log("first");
    }, true);

    body.addEventListener("click", function() {
        console.log("body");
    }, true);

    html.addEventListener("click", function () {
        console.log("html");
    }, true);

    window.addEventListener("click", function () {
        console.log("window");
    }, true);
    // window
    // html
    // body
    // first
    // second
    // button
    // ------冒泡开始------
    // button
    // second
    // first
    // body
    // html
    // window
</script>