js如何实现事件监听和解决兼容性

Posted 2020-11-26 颉旺飞

一、为什么需要事件监听？

我们可不可以为同一对象的同一事件绑定多个事件处理程序呢？

通过行内绑定和动态绑定是不可以的，但是可以通过事件监听来实现。

window.onload = function() {
    // 动态绑定
    document.getElementById(‘btn‘).onclick = function() {
        alert(‘first‘);
    }
    // 动态绑定
    document.getElementById(‘btn‘).onclick = function() {
        alert(‘second‘);
    }
}

<input type="button" value="点击" id="btn">

二、如何实现事件监听？

由于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‘);
    })
}

三、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：正序触发，先绑定先触发

四、解决事件监听的兼容性

/**
 * 解决事件监听兼容性问题
 * @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‘);
    })
}

五、移除事件监听

在实际项目开发中，可能需要动态移除事件监听程序。

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">

六、解决移除事件监听的兼容性问题

/**
 * 解决移除事件监听兼容性问题
 * @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);
    }
}