事件的綁定方式

一.賦值式(DOM0級事件綁定):ele.事件類型=function(){}

　　不能重復綁定

var obox = document.querySelector(".box") obox.onclick = function(){ console.log（1） } obox.onclick = function(){ console.log（2） } 上式結果得到 2 ， 覆蓋效果 刪除事件 obox.onclick.null;  得到 空

二.監聽式(DOM2級事件綁定)

　　特定的方法實現：ele.addEventListener

能重復綁定

obox.addEventListener("click",function(){
    console.log("hello")      //hello
},false)
obox.addEventListener("click",function(){
    console.log("world")     //world
},false)

能全部打印出來
刪除事件監聽：
obox.removeEventListener(type,fn,false)
obox.removeElementListener("click",fn1,false)
obox.removeElementListener("click",fn1,false)

以下是IE瀏覽器的支持
綁定：obox.attachEvent(type,fn)  ele前加 ”on“
console.log(box,attachEvent)

obox.attachEvent("onclick",fn1)
function fn1(){
    console.log("hhaha")
}
obox.attachEvent("onclick",fn2)
function fn2(){
    console.log("heihhh")
}    
刪除：
obox.detachEvent("onclick",fn1)
兼容
        function addEvent(ele,type,cb){
            if(ele.attachEvent){
                ele.attachEvent("on"+type,cb)
            }else{
                ele.addEventListener(type,cb,false)
            }
        }
        function removeEvent(ele,type,cb){
            if(ele.detachEvent){
                ele.detachEvent("on"+type,cb)
            }else{
                ele.removeEventListener(type,cb,false)
            }
        }

事件流的狀態：

    事件的觸發順序

        事件冒泡：從里向外

        事件捕獲：從外向里

            true:捕獲

            false：冒泡

        目標階段當前元素房前事件

var obox = document.querySelector(".box")
    var obox1 = document.querySelector(".box1")
    var obox2 = document.querySelector(".box2")


    obox.addEventListener("click",function(){
        alert("red的冒泡")
    },false)

    obox.addEventListener("click",function(){
        alert("red的捕獲")
    },true)
    
    obox1.addEventListener("click",function(){
        alert("green的冒泡")
    },false)

    obox1.addEventListener("click",function(){
        alert("green的捕獲")
    },true)

    obox2.addEventListener("click",function(){
        alert("blue的冒泡")
    },false)

    obox2.addEventListener("click",function(){
        alert("blue的捕獲")
    },true)