事件绑定与解绑
var EventUtil = { addHandler:function (obj, type, handler) { if(obj.addEventListener) { //如果是标准浏览器，即支持addEventListener的 console.log('标准浏览器'); obj.addEventListener(type, handler); } else if(obj.attachEvent) { //IE低版本浏览器 console.log('IE低版本浏览器'); obj.attachEvent('on' + type, handler); } else { console.log('以上都不支持'); obj['on' + type] = handler; } }, removeHandler:function(obj, type, handler) { if(obj.removeEventListener) { //标准浏览器 obj.removeEventListener(type, handler); } else if(obj.detachEvent) { //IE低版本浏览器 obj.detachEvent('on' + type, handler); } else { //以上皆不是 obj['on' + type] = null; } } }
问题：在IE中使用attachEvent()与使用DOM0级方法的主要区别在于事件处理程序的作用域。在使用DOM0级方法的情况下，事件处理程序会在其元素的作用域内运行；在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此this等于window
例：
在低版本ie中div不变色
在绑定事件的时候可以用
function addHandler(obj,evname,fn){
if(obj.addEventListener){
obj.addEventListener(evname,fn,false);
}else{
obj.attachEvent('on'+evname,function(){
fn.call(obj); //call方法第一个参数可以用来改变函数执行过程当中的内部this指向，attachEvent 下 this 指向的不是obj
});
}
}
在低版本ie下正常
Obj.attachEvent(事件名称，事件函数)
- 没有捕获
- 事件有on
- 事件函数执行顺序 （标准ie正序 非标准 倒序）
- This指向window
Obj.addEventListener(事件名称，事件函数，是否捕获) ----> 默认false冒泡 true捕获
- 有捕获
- 事件名称没有on
- 正序
- this指向出发该事件的对象