var EventUtil = {
addHandler: function(element, type, handler){ if (element.addEventListener){ element.addEventListener(type, handler, false); } else if (element.attachEvent){ element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; }
}, removeHandler: function(element, type, handler){ if (element.removeEventListener){ element.removeEventListener(type, handler, false); } else if (element.detachEvent){ element.detachEvent("on" + type, handler); } else { element["on" + type] = null; } } };
这里的使用了能力检测,先检测是否支持DOM2,如果支持就执行addEventListener,如果不支持就检测是否支持IE,如果支持就执行attachEvent,如果不支持IE,才执行DOM0方式。
注意:
1、DOM0级对每个事件只支持一个事件处理程序 ,就是说:
var btn = document.getElementById('myBtn');
btn.onclick = function(){
console.log(this.id)
}//无效
btn.onclick = function(){
console.log("hello world")
}
只能执行打印出hello world
2、IE事件处理程序attachEvent()与使用DOM0级方法的注意区别是在于事件处理程序的作用域
var btn = document.getElementById("myBtn"); btn.attachEvent("onclick", function(){ alert(this === window); //true });
在事件处理函数中,IE事件的this是全局的,跟window是一样的,DOM0的this是指该元素对象。