首頁(yè)技術(shù)文章正文

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

更新時(shí)間:2023-05-08 來(lái)源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

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

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

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

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

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

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

eventTarget.addEventListener(type, listener[, useCapture])
eventTarget.addEventListener()方法將指定的監(jiān)聽器注冊(cè)到 eventTarget(目標(biāo)對(duì)象)上,當(dāng)該對(duì)象觸發(fā)指定的事件時(shí),就會(huì)執(zhí)行事件處理函數(shù)。

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

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

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

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

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

eventTarget.attachEvent(eventNameWithOn, callback)

eventTarget.attachEvent()方法將指定的監(jiān)聽器注冊(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ù)瀏覽器,再處理特殊瀏覽器。


分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!