javascript基础从小白到高手系列一百四十二：跨浏览器事件处理程序

为了以跨浏览器兼容的方式处理事件，很多开发者会选择使用一个JavaScript 库，其中抽象了不同
浏览器的差异。有些开发者也可能会自己编写代码，以便使用最合适的事件处理手段。自己编写跨浏览
器事件处理代码也很简单，主要依赖能力检测。要确保事件处理代码具有最大兼容性，只需要让代码在
冒泡阶段运行即可。
为此，需要先创建一个addHandler()方法。这个方法的任务是根据需要分别使用DOM0 方式、
DOM2 方式或IE 方式来添加事件处理程序。这个方法会在EventUtil 对象（本章示例使用的对象）上
添加一个方法，以实现跨浏览器事件处理。添加的这个addHandler()方法接收3 个参数：目标元素、
事件名和事件处理函数。
有了addHandler()，还要写一个也接收同样的3 个参数的removeHandler()。这个方法的任务
是移除之前添加的事件处理程序，不管是通过何种方式添加的，默认为DOM0 方式。
以下就是包含这两个方法的EventUtil 对象：
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 方式。如果有DOM2 方式，就使用该方式，传
入事件类型和事件处理函数，以及表示冒泡阶段的第三个参数false。否则，如果存在IE 方式，则使
用该方式。注意这时候必须在事件类型前加上"on"，才能保证在IE8 及更早版本中有效。最后是使用
DOM0 方式（在现代浏览器中不会到这一步）。注意使用DOM0 方式时使用了中括号计算属性名，并将
事件处理程序或null 赋给了这个属性。
可以像下面这样使用EventUtil 对象：
let btn = document.getElementById(“myBtn”)
let handler = function() {
console.log(“Clicked”);
};
EventUtil.addHandler(btn, “click”, handler);
// 其他代码
EventUtil.removeHandler(btn, “click”, handler);
这里的addHandler()和removeHandler()方法并没有解决所有跨浏览器一致性问题，比如IE
的作用域问题、多个事件处理程序执行顺序问题等。不过，这两个方法已经实现了跨浏览器添加和移除
事件处理程序。另外也要注意，DOM0 只支持给一个事件添加一个处理程序。好在DOM0 浏览器已经
很少有人使用了，所以影响应该不大。