跨浏览器事件处理

我是inner

IE的事件流是事件冒泡
            传播顺序
            div
            body
            html
            document

            IE9 FF Chrome safari将事件冒泡到window

        addEventListener(type, handler, boolean)
            type 为click load mouseover
            boolean true  事件捕获 在事件捕获阶段调用事件处理程序  body > wrap > inner
                    false 事件冒泡 在事件冒泡阶段调用事件处理程序  inner > wrap > body

            handler 事件处理程序 也就是事件函数


        removeEventListener(type, handler, boolean)
            handler 必须是与addEventListener中的函数是同一个函数（不能是内容相同的匿名函数 因为是指向两个内存区的代码结构相同的函数）
        //支持IE9 以上


        attachEvent(type, handler)
            type onclick onmouseover 
            handler 同上
            
        detachEvent(type, handler)
            type onclick onmouseover 
            handler 匿名函数 解绑无效
        //ie opera 专属

var utilEvent = {
            addHandler: function (ele, type, handler) {
                if(ele.addEventListener){
                    ele.addEventListener(type, handler, true);
                }else if(ele.attachEvent){
                    ele.attachEvent("on" + type, handler)
                }else{
                    ele["on" + type ] = handler;
                }
            },
            removeHandler: function(ele, type, handler){
                if(ele.removeEventListener){
                    ele.removeEventListener(type, handler, true)
                }else if(ele.detach){
                    ele.detach("on" + type, handler)
                }else{
                    ele["on" + type] = null;
                }
            }
        } 

        var wrap = document.querySelector(".wrap");
        var inner = document.querySelector(".inner");

        function bubble_body(){
            alert("body is click");
        }
        function bubble_wrap(){
            alert("wrap is click");
        }
        function bubble_inner(){
            alert("inner is click");
        }
        utilEvent.addHandler(document.body, "click", bubble_body)
        utilEvent.addHandler(wrap, "click", bubble_wrap)
        utilEvent.addHandler(inner, "click", bubble_inner)

　　

事件冒泡
            触发由最具体的元素开始（嵌套最深的元素）接收 然后再逐级向上传播
            
            IE5.5及更早版本 事件冒泡会跳过html元素 
            IE9则将事件一直冒泡到window

        事件补捕获
            触发由最不具体的元素开始（document）接受 然后像内部传递


        DOM事件流
            事件捕获阶段 截或事件提供机会
            处于目标阶段 实际目标接到事件