在添加事件處理程序事addEventListener和attachEvent主要有幾個區別

1. 參數個數不相同，這個最直觀，addEventListener有三個參數，attachEvent只有兩個，attachEvent添加的事件處理程序只能發生在冒泡階段，addEventListener第三個參數可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設置為冒泡階段）

2. 第一個參數意義不同，addEventListener第一個參數是事件類型（比如click，load），而attachEvent第一個參數指明的是事件處理函數名稱（onclick，onload）

3. 事件處理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的觸發元素，而attachEvent事件處理程序會在全局變量內運行，this是window，所以剛才例子才會返回undefined，而不是元素id

4. 為一個事件添加多個事件處理程序時，執行順序不同，addEventListener添加會按照添加順序執行，而attachEvent添加多個事件處理程序時順序無規律(添加的方法少的時候大多是按添加順序的反順序執行的，但是添加的多了就無規律了)，所以添加多個的時候，不依賴執行順序的還好，若是依賴于函數執行順序，最好自己處理，不要指望瀏覽器

了解了這四點區別后我們可以嘗試寫一個瀏覽器兼容性比較好的添加事件處理程序方法

function addEvent(node, type, handler) {
  if (!node) return false;
  if (node.addEventListener) {
    node.addEventListener(type, handler, false);
    return true;
  } else if (node.attachEvent) {
    node['e' + type + handler] = handler;
    node[type + handler] = function() {
      node['e' + type + handler](window.event);
    };
    node.attachEvent('on' + type, node[type + handler]);
    return true;
  }
  return false;
}

在取消事件處理程序的時候：

function removeEvent(node, type, handler) {
  if (!node) return false;
  if (node.removeEventListener) {
    node.removeEventListener(type, handler, false);
    return true;
  } else if (node.detachEvent) {
    node.detachEvent('on' + type, node[type + handler]);
    node[type + handler] = null;
  }
  return false;
}