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

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

傳統(tǒng)注冊(cè)方式

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

方法監(jiān)聽(tīng)注冊(cè)方式

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

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

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

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

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

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

useCapture：可選參數(shù)，是一個(gè)布爾值，默認(rèn)是 false。學(xué)完 DOM 事件流后，我們?cè)龠M(jìn)一步學(xué)習(xí)。

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

eventTarget.attachEvent(eventNameWithOn, callback)

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

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

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

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

注意：IE8 及早期版本支持

注冊(cè)事件兼容性解決方案

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

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