DOM注冊事件：傳統(tǒng)注冊和方法監(jiān)聽注冊

給元素添加事件，稱為注冊事件或者綁定事件。注冊事件有兩種方式：傳統(tǒng)方式和方法監(jiān)聽注冊方式。

傳統(tǒng)注冊方式

傳統(tǒng)注冊方式注重注冊事件的唯一性，同一個元素同一個事件只能設(shè)置一個處理函數(shù)，最后注冊的處理函數(shù)將會覆蓋前面注冊的處理函數(shù)。利用 on 開頭的事件onclick。

方法監(jiān)聽注冊方式

方法監(jiān)聽注冊方式是w3c 標準 推薦方式，addEventListener() 它是一個方法，IE9 之前的 IE 不支持此方法，可使用 attachEvent() 代替，方法監(jiān)聽同一個元素同一個事件可以注冊多個監(jiān)聽器，按注冊順序依次執(zhí)行。

addEventListener 事件監(jiān)聽方式

eventTarget.addEventListener(type, listener[, useCapture])

該方法接收三個參數(shù)：

type：事件類型字符串，比如 click 、mouseover ，注意這里不要帶 on。

listener：事件處理函數(shù)，事件發(fā)生時，會調(diào)用該監(jiān)聽函數(shù)。

useCapture：可選參數(shù)，是一個布爾值，默認是 false。學完 DOM 事件流后，我們再進一步學習。

attachEvent 事件監(jiān)聽方式

eventTarget.attachEvent(eventNameWithOn, callback)

eventTarget.attachEvent()方法將指定的監(jiān)聽器注冊到 eventTarget(目標對象) 上，當該對象觸發(fā)指定的事件時，指定的回調(diào)函數(shù)就會被執(zhí)行。

該方法接收兩個參數(shù)：

eventNameWithOn：事件類型字符串，比如 onclick 、onmouseover ，這里要帶 on

callback： 事件處理函數(shù)，當目標觸發(fā)事件時回調(diào)函數(shù)被調(diào)用

注意：IE8 及早期版本支持

注冊事件兼容性解決方案

function addEventListener(element, eventName, fn) {
      // 判斷當前瀏覽器是否支持 addEventListener 方法
      if (element.addEventListener) {
        element.addEventListener(eventName, fn);  // 第三個參數(shù) 默認是false
      } else if (element.attachEvent) {
        element.attachEvent('on' + eventName, fn);
      } else {
        // 相當于 element.onclick = fn;
        element['on' + eventName] = fn;
 }

兼容性處理的原則： 首先照顧大多數(shù)瀏覽器，再處理特殊瀏覽器。