标签：生产 问题 默认 rip str event remove 模型 NPU
一、为什么需要事件监听？
我们可不可以为同一对象的同一事件绑定多个事件处理程序呢？
通过行内绑定和动态绑定是不可以的，但是可以通过事件监听来实现。
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);
}
}
js如何实现事件监听和解决兼容性
标签：生产 问题 默认 rip str event remove 模型 NPU
原文地址：https://www.cnblogs.com/xiewangfei123/p/12117867.html
