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

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

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

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

复制代码
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’);
})
}

复制代码

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

}

复制代码

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

复制代码
/**

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

}