为了以跨浏览器兼容的方式处理事件,很多开发者会选择使用一个 JavaScript 库,其中抽象了不同浏览器的差异。
有些开发者也可能会自己编写代码,以便使用最合适的事件处理手段。自己编写跨浏览器事件处理代码也很简单,主要依赖能力检测。要确保事件处理代码具有最大兼容性,只需要让代码在冒泡阶段运行即可。
要实现这一点,核心在于编写一个辅助函数,比如 addHandler()。它的作用是根据当前环境的能力,自动选择最合适的添加方式——优先 DOM2,其次 IE 专属,最后回退到 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;
}
}
};
这两个函数的逻辑是一致的:先判断是否支持标准的 addEventListener。如果有,就传入事件类型、处理函数以及表示冒泡阶段的第三个参数 false。否则,如果存在 IE 方式,则使用该方式。注意这时候必须在事件类型前加上 on,才能保证在 IE8 及更早版本中有效。最后是使用 DOM0 方式(在现代浏览器中不会到这一步)。注意使用 DOM0 方式时使用了中括号计算属性名,并将事件处理程序或 null 赋给了这个属性。
可以像下面这样使用 EventUtil 对象:
let btn = .();
handler = () {
.();
};
.(btn, , handler);
.(btn, , handler);

