JS如何實現事件監聽和解決兼容性

1、爲何須要事件監聽？

咱們可不能夠爲同一對象的同一事件綁定多個事件處理程序呢？

經過行內綁定和動態綁定是不能夠的，可是能夠經過事件監聽來實現。

window.onload = function() {
    // 動態綁定
    document.getElementById('btn').onclick = function() {
        alert('first');
    }
    // 動態綁定
    document.getElementById('btn').onclick = function() {
        alert('second');
    }
}

<input type="button" value="點擊" id="btn">

2、如何實現事件監聽？

因爲Javascript屬於客戶端語言，又因爲全部瀏覽器並非同一廠家生產的，沒有統一的標準，因此Javascript具備兼容性問題，同理，事件監聽也具備兼容性問題，在不一樣瀏覽器下建立的方式也是不一樣的。

1. 基於IE內核的瀏覽器（IE8如下版本、360、搜狗、2345瀏覽器的兼容模式）

DOM對象.attachEvent(type,callback);

主要功能：爲某個DOM對象的某個type事件綁定相關的事件處理程序（callback）

參數	說明
type	事件類型，如onclick，onkeydown
callback	事件的處理程序，一般是一個匿名函數

window.onload = function() {
    // 在IE瀏覽器下使用事件監聽
    document.getElementById('btn').attachEvent('onclick',function(){
        alert('first');
    })
    // 在IE瀏覽器下使用事件監聽
    document.getElementById('btn').attachEvent('onclick',function(){
        alert('second');
    })
}

2. 基於W3C內核的瀏覽器（IE9以上版本、火狐瀏覽器、谷歌瀏覽器、國內瀏覽器的極速模式）

DOM對象.addEventListener(type,callback,capture);

主要功能：爲某個DOM對象的某個type事件綁定相關的事件處理程序（callback）

參數	說明
type	事件類型，不帶on前綴，如click、keydown
callback	事件的處理程序，一般是一個匿名函數
capture	瀏覽器模型，true（捕獲模型），false（冒泡模型），默認IE8如下瀏覽器只支持冒泡模型，因此其值默認爲false。

window.onload = function() {
    // 在W3C瀏覽器下使用事件監聽
    document.getElementById('btn').addEventListener('click',function(){
        alert('first');
    })
    // 在W3C瀏覽器下使用事件監聽
    document.getElementById('btn').addEventListener('click',function(){
        alert('second');
    })
}

3、IE內核與W3C內核事件監聽區別

1. 綁定語法不一樣

IE：attachEvent

W3C：addEventListener

2. type參數不一樣

IE：事件須要添加'on'前綴，如on+事件

W3C：事件不須要添加'on'前綴，如事件

3. 參數數量不一樣

IE：2個參數，type、callback

W3C：3個參數，type、callback、capture（瀏覽器模型）

4. 觸發順序不一樣

IE：倒序觸發，先綁定後觸發

W3C：正序觸發，先綁定先觸發

4、解決事件監聽的兼容性

/**
 * 解決事件監聽兼容性問題
 * @param {Object} obj對象
 * @param {String} type時間類型,不帶'on'前綴
 * @param {Function} callback事件處理程序
 */
function addEvent(obj,type,callback) {
    if (obj.addEventListener) {
        // W3C內核
        obj.addEventListener(type,callback);
    } else {
        // IE內核
        obj.attachEvent('on'+type,callback);
    }
}

window.onload = function() {
    // 爲btn按鈕綁定事件監聽
    addEvent(document.getElementById('btn'),'click',function(){
        alert('first');
    })
    // 爲btn按鈕綁定事件監聽
    addEvent(document.getElementById('btn'),'click',function(){
        alert('second');
    })
}

5、移除事件監聽

在實際項目開發中，可能須要動態移除事件監聽程序。

1. 基於IE內核瀏覽器

detachEvent(type,callback); // 移除事件監聽

主要功能：在IE內核瀏覽器下移除事件監聽程序

參數	說明
type	要移除的事件類型，如onclick、onmouseover
callback	要移除事件處理程序的名稱，一般是函數名稱

2. 基於W3C內核瀏覽器

removeEventListener(type,callback); // 移除事件監聽

主要功能：在W3C內核瀏覽器下移除事件監聽程序

參數	說明
type	要移除的事件類型，如click、mouseover
callback	要移除事件處理程序的名稱，一般是函數名稱

特別說明：若是一個對象向進行事件移除，那麼其綁定事件監聽時事件處理程序必須是有名函數，不然是沒法進行移除的，謹記！！！

function fn1() {
    alert('first');
}

function fn2() {
    alert('second');
}

window.onload = function() {
    var btn = document.getElementById('btn');
    var del = document.getElementById('del');

    // 爲btn按鈕綁定事件監聽
    addEvent(btn,'click',fn1);
    // 爲btn按鈕綁定事件監聽
    addEvent(btn,'click',fn2);

    del.onclick = function() {
        // IE內核下移除fn1事件監聽程序
        btn.detachEvent('onclick',fn1);
        // W3C內核下移除fn2事件監聽程序
        btn.removeEventListener('click',fn2);
    }
}

<input type="button" value="點擊" id="btn">
<input type="button" value="移除" id="del">

6、解決移除事件監聽的兼容性問題

/**
 * 解決移除事件監聽兼容性問題
 * @param {Object} obj對象
 * @param {String} type時間類型,不帶'on'前綴
 * @param {Function} callback事件處理程序
 */
function removeEvent(obj,type,callback) {
    if (obj.removeEventListener) {
        // W3C內核
        obj.removeEventListener(type,callback);
    } else {
        // IE內核
        obj.detachEvent('on'+type,callback);
    }
}

function fn1() {
    alert('first');
}

function fn2() {
    alert('second');
}

window.onload = function() {
    var btn = document.getElementById('btn');
    var del = document.getElementById('del');

    // 爲btn按鈕綁定事件監聽
    addEvent(btn,'click',fn1);
    // 爲btn按鈕綁定事件監聽
    addEvent(btn,'click',fn2);

    del.onclick = function() {
        // 兼容性移除
        removeEvent(btn,'click',fn1);
        removeEvent(btn,'click',fn2);
    }
}