原生 JavaScript 跨浏览器事件处理兼容方案

为了以跨浏览器兼容的方式处理事件，很多开发者会选择使用一个 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);