事件流

事件流描述的是从页面中接收事件的顺序。

DOM0级事件

dom.onclick = fn;
优点：一是简单，二是有跨浏览器的优势。
只能指定一个函数。
只能在冒泡阶段触发。

使用DOM0级方法指定的事件处理程序被认为是元素的方法，换句话说，程序中的this指向当前元素。
删除事件处理程序：dom.onclick = null;

DOM2级事件

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

dom.addEventListener(type, fn, boolean);
接收三个参数：事件类型（不带“on”）、事件处理函数、一个布尔值（true表示在捕获阶段调用事件处理函数，false表示在冒泡阶段调用事件处理函数；不传第三个参数，默认在冒泡阶段调用事件处理函数。在捕获阶段调用后，不会在冒泡阶段再次调用）。
可以添加多个事件处理函数，按照添加顺序执行。

IE9和其他浏览器都支持。

移除：dom.removeEventListener(type, fn, boolean);
记住，第二个参数是函数名。

IE事件处理程序

dom.attachEvent(type, fn);
只接受两个参数：事件类型（带“on”）、事件处理函数。只能添加到冒泡阶段。
虽然与addEventListener()类似，但它并不是IE的DOM2级方法，IE9就已经实现了addEventListener()方法，而attachEvent()不属于DOM方法。

attachEvent()与DOM0级方法的主要区别：1、this指向window；2、可以为一个元素添加多个事件处理程序。

IE9以前，按照添加的顺序，以相反的顺序被触发；从IE9开始，按照添加的顺序依次触发。考虑到IE9，你就应该使用addEventListener()，所有只考虑第一种情况：逆序执行。
IE11已经不支持attachEvent()了。

移除：dom.detachEvent(type, fn);

执行顺序

先捕获后冒泡，如果同时有DOM0级事件和DOM2级事件，按照添加顺序依次执行；如果同时有DOM0级事件和attachEvent()添加的事件，优先执行DOM0级事件，再逆序执行attachEvent()添加的事件。

为什么不讨论同时有DOM0级事件、DOM2级事件、attachEvent()添加的事件？因为没有必要，即使IE这三者都支持，如果支持DOM2级事件，你也就没有使用attachEvent()的必要了。也就是说只会使用addEventListener()和attachEvent()其中的一个。

跨浏览器的事件处理程序

  function addHandler(dom, type, handler) {
     
    if (dom.addEventListener) {
     
      dom.addEventListener(type, handler, false)
    } else if (dom.attachEvent) {
     
      dom.attachEvent('on' + type, handler)
    } else {
     
      dom['on' + type] = handler
    }
  }
  function removeHandler(dom, type, handler) {
     
    if (dom.removeEventListener) {
     
      dom.removeEventListener(type, handler, false)
    } else if (dom.detachEvent) {
     
      dom.detachEvent('on' + type, handler)
    } else {
     
      dom['on' + type] = null
    }
  }