JavaScript事件監聽

1、事件event對象

1. Event事件對象，用來獲取事件的詳細信息：鼠標位置、鍵盤按鍵。在主流瀏覽器下默認傳參給事件函數的第一個參數，ie低版本會掛載在window下的event屬性裏，保存了觸發事件參數，這是個全局對象。
2. Event對象的兼容：e = e || window.event;

obj.onclick = function(e){
    e = e || window.event;
}
複製代碼

3. event.type返回事件的類型。
4. 取消事件的傳遞，主流瀏覽器下使用e.stopPropagation();方法，IE瀏覽器下使用e.cancelBubble=true屬性。

2、DOM事件

1. DOM 0級事件，onclick被認爲是元素的屬性方法，只能綁定一個。
2. DOM 2級事件，主流瀏覽器下使用addEventListener(事件名稱，事件函數，是否捕獲)註冊事件，第一個參數傳事件類型（click），第二個參數傳事件函數，第三個函數傳是否捕獲，true使用捕獲，默認false使用冒泡。事件名稱沒有on，事件執行的順序是正序，this指觸發該事件的對象。IE瀏覽器下使用attacheEvent(事件名稱，事件函數)註冊事件，第一個參數傳事件類型（onclick），第二個參數傳事件函數。沒有捕獲，事件名稱有on，this指向window。
3. DOM 2級事件，主流瀏覽器下使用removeEventListener(事件名稱，事件函數，是否捕獲)註銷事件，第一個參數傳事件類型（click），第二個參數傳事件函數，第三個參數傳是否捕獲，狀態要和註冊事件一一對應。IE瀏覽器使用detachEvent(事件名稱，事件函數)註銷事件。第一個參數傳事件類型（onclick）。

var oBox = document.getElementById('box');
var captrue = true; //捕獲
document.addEventListener('click', function(){
    console.log('document點擊')
},captrue);

document.body.addEventListener('click', function(e){
    e.stopPropagation();  //中止事件傳遞，下面的oBox點擊事件不會觸發
    console.log('body點擊')
},captrue);

oBox.addEventListener('click',function(e) {
    e.stopPropagation();
    console.log('box點擊')
},captrue);
複製代碼

//IE瀏覽器下
var fn = function(e){
    e = e || window.event;
    //e.stopPropagation();
    e.cancelBubble = true;
    console.log('點擊box')
};
oBox.attachEvent('onclick',fn);
//oBox.addEventListener("click",fn);

var timer;
document.onclick = function(){
    timer = setTimeout(function(){
        console.log('單擊')
    },300);
}
//文檔雙擊就會取消 oBox的點擊事件
document.ondblclick = function(){
    console.log('雙擊');
    clearTimeout(timer);
    oBox.detachEvent('onclick',fn);
}
複製代碼

3、事件冒泡

1. 事件冒泡指子元素觸發事件的時候，會 冒泡（觸發）父級的相同的事件 。
2. 主流瀏覽器下使用e.stopPopagation();，IE瀏覽器下使用e.cancelBubble=true;

4、兼容事件註冊

evenetBind(box,'click',function(event){
    console.log(event);
    eventUnbind(this,'click',true);
},true);

/* * 綁定事件 * ele 元素節點 * event 事件類型 * hadler 處理事件函數 * capture 是否捕獲 */
function evenetBind(ele,eventType,handler,capture) {
    //用包裝函數作處理
    ele['evet'+eventType] = handler;

    //先判斷是否爲主流瀏覽器
    if(ele.addEventListener){
        ele.addEventListener(eventType,ele['evet'+eventType],capture);
    }else if(ele.attachEvent){
        //ie須要作處理
        ele['evet'+eventType] = function(){
            //處理低版本ie 的this指向問題
            handler.call(ele,window.event);
        };
        ele.attachEvent('on'+eventType,ele['evet'+eventType]);
    }else{
        ele['on'+eventType] = handler;
    }
}

//註銷事件
function eventUnbind(ele,event,capture){
    //若是在就是主流瀏覽器
    if(ele.removeEventListener){
        ele.removeEventListener(event,ele['evet'+event],capture);
    }else if(ele.detachEvent){
        ele.detachEvent('on'+event,ele['evet'+event]);
    }else{
        ele['on'+event] = null;
    }
}
複製代碼