标签：

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

我们可不成以为同一东西的同一事件绑定多个事件措置惩罚惩罚措施呢？

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

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

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

二、如何实现事件监听？

由于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); // 移除事件监听