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);
    }
}