这里主要是针对DOM2级事件,对于HTML事件和DOM0级事件在非IE和IE下都能得到支持,因此这里只实现对DOM2级事件的兼容性处理和封装
思路:
- 绑定事件:如果能使用addEventListener方法绑定的,就采用本方法;否则采用attachEvent方法
- 解绑事件:如果能采用addEventListener方法绑定的,就采用removeEventListener方法解绑;否则就采用detachEvent方法解绑
伪代码:
function addEvent(ele){
if(如果为非IE){
就执行addEventListener
}else{
执行attachEvent
}
}
addEvent();
下面就直接看代码吧
<div style="width: 200px;height: 200px;background-color: pink"></div>
var div = document.querySelector('div');
//采用封装,封装成一个对象
//调用的时候直接 对象.key即可
var superEvent = {
// ele--哪个元素调用该事件
// type--调用事件的类型(click、mousemove...)
// func--函数
// 添加事件
add: function(ele, type, func) {
//如果在非IE环境下
if (ele.addEventListener) {
ele.addEventListener(type, func);
} else { //在IE环境下
ele.attachEvent('on' + type, func);
}
},
//移除事件
remove: function(ele, type, func) {
//如果在非IE环境下
if (ele.removeEventListener) {
ele.removeEventListener(type, func);
} else {
//在IE环境下
ele.detachEvent('on' + type, func);
}
}
}
function show() {
console.log("这是一个div执行函数");
}
superEvent.add(div, 'click', show);
// superEvent.remove(div, 'click', show);
非IE:
IE下: