事件流

<div class="outer" id="outer" >
        <div class="inner" id="inner">
            
        </div>
    </div>
    <input type="button" value="测试解绑" id="unbind" />
    <p id="text">劲爆鸡米花</p>

<script type="text/javascript">

    // ================= 捕获与冒泡
    var outer = document.getElementById("outer"),
        inner = document.getElementById("inner");

    fn1 = function(e){
        console.log(e.target.id);    
        //console.log(this.id);        // 始终是 outer  e.target 不是任何时候都是指向 this 的。 this 始终指向的是绑定事件的元素
        console.log("1");
    }
    
    outer.addEventListener("click",fn1, false);// 第三个参数设置为true -事件发生在捕获阶段； false- 冒泡阶段 inner  / outer

    // 点击inner 的时候，先发生捕获，在输出2; But 将outer 绑定的 事件 设置为冒泡阶段，输出顺序将会颠倒
    inner.addEventListener("click", function(e){
        console.log(2);
        console.log(e.cancelBubble);
        if(e.stopPropagation){
            console.log(3)
            e.stopPropagation();
        }
        e.cancelBubble = true;
    }, false);

    // =============== 解除绑定
    var $unbind = document.getElementById("unbind");

    fn3 = function(){
        console.log("解绑", this.id);
    }
    /*$unbind.addEventListener("click" , function(){
        console.log("解绑", this.id);
    }, false);

    $unbind.removeEventListener("click", function(){    // 不起作用
        console.log("解绑", this.id);
    }, false);*/

    $unbind.addEventListener("click" , fn3, false);

    $unbind.removeEventListener("click", fn3, false); // 起作用 因为上面的其实 不是解绑的同一个function 并且 参数应当设置为一致


    //如果你的文档结构非常复杂，你可以通过阻止冒泡来节约系统资源。毕竟，浏览器必须查询事件目标的每一个祖先元素是否有绑定相同的事件，即使一个也没有找到，这个查询的过程仍然需要花费时间


    // IE attachEvent
    var btn = document.getElementById("text");
    /*btn.attachEvent("onclick", function(e){    // chrome 就会报错啦
        console.log(this === window);        // true
        console.log(this)    // window      attachEvent 中 this  指向 window; 在使用DOM0 级方法的情况下，事件处理程序会运行在所属元素的作用域内

        var target = e.target || e.srcElement;
        console.log(target.id)    // text
    });
    btn.attachEvent("onclick", function(){
        console.log("i come firstly?!");    // IE８，７　下面会先输出这个
    });*/



    // 兼容浏览器
    var addEvent = function(el, type, fn){
        el.addEventListener ? el.addEventListener(type, fn, false) : el.attachEvent("on" + type, function(){
            fn.apply(el, arguments);
        });
    };
    addEvent(btn, "click", function(){console.log(this)});
    


    </script>