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

ゞ浴缸里的玫瑰 2021-12-12 12:55 331阅读 0赞

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

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

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

复制代码  
window.onload = function() \{  
// 动态绑定  
document.getElementById(‘btn’).onclick = function() \{  
alert(‘first’);  
\}  
// 动态绑定  
document.getElementById(‘btn’).onclick = function() \{  
alert(‘second’);  
\}  
\}

复制代码

### 二、如何实现事件监听？ ###

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

复制代码

1.  基于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

1.  type参数不同

IE：事件需要添加’on’前缀，如on+事件

W3C：事件不需要添加’on’前缀，如事件

1.  参数数量不同

IE：2个参数，type、callback

W3C：3个参数，type、callback、capture（浏览器模型）

1.  触发顺序不同

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

复制代码

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

复制代码  
/\*\*

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