事件的綁定和解綁

//綁定事件
document.onclick=function () {
        alert(1);
    }
//解除事件
document.onclick=null;

這是最常用的為對象綁定事件的方法。但是只能給一個對象綁定一個相同時間，想綁定第二個會覆蓋。在Js中提供了一些方法讓我們可以給一個對象進行多次綁定。

/**obj. addEventListener("click",fun(){},false)
*    添加事件
*    不兼容IE678;
*           事件名稱不帶on
*           第二個是事件函數(shù)
*           事件捕獲。默認false
*obj.removeEventListener("click",fn2)；
*    事件解綁
*/
document.addEventListener("click",fn1);
document.addEventListener("click",fn2);
document.removeEventListener("click",fn2);
// 解綁前，彈出1，彈出2；
//解綁后，彈出1。
function fn1() {
    alert(1)
}
function fn2() {
    alert(2)
}

/*obj.attachEvent("onclick",fun{})   
*     兼容IE678
*     只接收倆參數(shù)
*        第一個是事件名稱，是帶on的事件名字
*        第二個是事件函數(shù)。
*
*obj.detachEvent("onclick",fn)
*     事件解綁
*      fn可以使匿名函數(shù)，但需和綁定的匿名函數(shù)完全一致，包括空格
*
**/
document.attachEvent("onclick",function () {
        alert(1)
});
document.attachEvent("onclick",fn);
document.detachEvent("onclick",fn);
//解綁前，彈出2，彈出1
//解綁后，彈出1
function fn() {
    alert(2)
}

我們可以發(fā)現(xiàn)attachEvent方法和addEventListener的執(zhí)行順序是相反的。
下面提供一種兼容寫法，僅供參考

//添加事件
function addEvent(obj,eName,eFn) {
    if(obj.attachEvent){ //判斷支不支持attacgevent方法，如果支持就是ie678
        obj.attachEvent("on"+eName,eFn) //兼容IE678
    }else{
        obj.addEventListener(eName,eFn)//兼容標準瀏覽器
    }
}
//移除事件
function removeEvent(obj,eName,eFn) {
    if(obj.attachEvent){ //判斷支不支持attacgevent方法，如果支持就是ie678
        obj.detachEvent("on"+eName,eFn) //兼容IE678
    }else{
        obj.removeEventListener(eName,eFn)//兼容標準瀏覽器
    }
}

但是這并不能解決執(zhí)行順序不同的問題，不過在使用中影響不大。

事件捕獲

在上面我們提到addEventListener方法的第三個參數(shù)為事件捕獲，默認為false?，F(xiàn)在我們來了解一下事件捕獲。

<div id="box1">1
    <div id="box2">2
        <div>
            <div id="box3">3</div>
        </div>
    </div>
</div>
<script>

    /*
    *   事件捕獲
    *       事件在傳遞的時候會有一個觸發(fā)的順序
    *       false:從里到外，true：從外到內(nèi)
    *       同時屬性為true的事件會先于false執(zhí)行
    *       只有在標準瀏覽器下才有這個概念
    *
    * */

    box1.addEventListener("click",fn1，false)
    box2.addEventListener("click",fn2，false)
    box3.addEventListener("click",fn3，false)

    function fn1() {
        console.log(1)
    }
    function fn2() {
        console.log(2)
    }
    function fn3() {
        console.log(3)
    }
//點擊box3
// 3 2 1
// 若都設(shè)置為true 1 2 3 
</script>

事件冒泡

我們在講事件捕獲的時候可以發(fā)現(xiàn)一件很有趣事情就是，我只是點擊了最里面的盒子，但是包裹該盒子的大盒子的事件也被觸發(fā)了，這就是事件冒泡了。
那這是為什么呢？仔細想想不難發(fā)現(xiàn)，雖然我們點擊的是一個小盒子。但是因為小盒子在大盒子內(nèi)，點擊小盒子的同時，我們也點擊了大盒子。所以會觸發(fā)大盒子的事件。
但是很多時候我們并不希望如此，所以我們有必要來清除事件冒泡。

<div id="box1">1
    <div id="box2">2
        <div>
            <div id="box3">3</div>
        </div>
    </div>
</div>
<script>

   /*
    *   事件冒泡
    *       事件會從自己身上往上傳遞
    *
    *   阻止冒泡
    *       e.cancelBubble = true；
    *       事件源
    *
    * */

    box1.onclick=function (e) {
        e=e||window.event;
        e.cancelBubble = true;
        console.log(1)
    }
    box2.onclick=function (e) {
        e=e||window.event;
        e.cancelBubble = true;
        console.log(1)
    }
    box3.onclick=function (e) {
        e=e||window.event;
        e.cancelBubble = true;
        console.log(3)
    }
    //點擊box3    3
    //點擊box2    2
    //點擊box1    1
</script>

清除默認事件

js中帶有一些默認事件。例如我們對文本進行操作時，默認存在選中事件。在必要的時候我們可以去掉我們不想要的默認事件。

   /*
    *      e.preventDefault()
    *           清除默認事件
    *           不兼容IE678
    *      e.returnValue=false; 
    *           只支持IE678
    *       return false
    *           也可以清除默認事件
    *    obj.事件=function (e) {
    *        e = e||window.event;
    *        e.returnValue = false;
    *        //e.preventDefault();
    *        //return false;
    *    }
    *    //根據(jù)實際情況選擇
    * */