深入理解js Dom事件機(jī)制（二）——添加事件處理程序

ddongjian0000 發(fā)布于2019-08-21 17:39 / 2061人閱讀

摘要：深入理解事件機(jī)制一事件流事件就是當(dāng)用戶或者瀏覽器自身執(zhí)行的某種動作，諸如等都是事件的名稱，那響應(yīng)個事件的函數(shù)就稱為事件處理程序事件處理函數(shù)事件句柄。

深入理解js Dom事件機(jī)制（一）——事件流

事件就是當(dāng)用戶或者瀏覽器自身執(zhí)行的某種動作，諸如 click、mouseover等都是事件的名稱，那響應(yīng)個事件的函數(shù)就稱為事件處理程序（事件處理函數(shù)、事件句柄）。 事件處理程序的名字都是以on+事件名稱命名，比如 click事件的事件處理程序就是onclick， 為某個事件指定事件處理程序的方式大致分為三種。

1、HTML事件處理程序

這個很簡單，大家基本初學(xué)js的時候都應(yīng)該用過，就不再贅述，直接看實(shí)例代碼




    
    Html事件處理程序

以上代碼展示了兩種html指定事件處理程序的方法，需要注意的是 第一種做法的this指向的是元素本身， 所以我們可以很容易的訪問元素本身的屬性，而第二種做法的this指向的window對象。

缺點(diǎn)：

存在時差問題，當(dāng)用戶在元素出現(xiàn)在頁面就觸發(fā)事件，但有可能這個時候事件處理程序不具備執(zhí)行的條件。

html與js代碼耦合度高，這正是很多開發(fā)者放棄html事件處理程序的原因。

2、DOM0級事件處理程序

這種方式首先需要取得一個dom元素對象的應(yīng)用，然后將一個函數(shù)賦值給一個事件處理程序，這種方式在第四代瀏覽器中就已經(jīng)出現(xiàn)，至今仍然為現(xiàn)在瀏覽器所支持，原因一是簡單，二是具有跨瀏覽器的優(yōu)勢。




    
    DOMO級事件處理程序

通過上面的代碼可以看出，這種方法指定的事件處理程序中this是指向元素本身。相對應(yīng)的這種方法也可以刪除指定的事件處理程序： btn.onclick = null.

3、DOM2級事件處理程序

DOM2級事件定義了兩個方法，用于處理指定和刪除事件處理程序的操作：addEventListener()、removeEventListener(),它們都接受三個參數(shù)：要處理的事件名、事件處理函數(shù)、布爾值（true：在捕獲階段調(diào)用事件處理函數(shù)，false:在冒泡階段調(diào)用事件處理函數(shù)）。




    
    DOM2級事件處理程序

從上述代碼中可以看出：

addEventListener可以對一個元素添加多個事件處理程序，并可以聲明是將事件處理程序添加到哪一個階段（為了保證兼容性、建議都將事件處理程序添加到冒泡階段）。

需要特別注意的是：removeEventListener移除事件處理函數(shù)的時候，傳入的事件事件處理函數(shù)必須和addEventListener傳入的相同，方可移除，這就意味著如果addEventListener中使用了一個匿名函數(shù)來作為事件處理函數(shù)，那么removeEventListener將無法移除。

4、IE事件處理程序（IE8 && IE8 - && Opera）

IE實(shí)現(xiàn)了類似DOM中的兩個方法：attacheEvent()、detachEvent(),它們接受兩個參數(shù)：事件處理程序名稱、事件處理函數(shù)。由于IE8以及更早的瀏覽器只支持冒泡事件流，所以通過attacheEvent（）添加的事件處理程序都將在會被添加到冒泡階段。




    
    IE事件處理程序

與DOM2級方法的異同

相同：

   1、都可以添加和移除事件處理程序，匿名函數(shù)均不可移除。
   2、都可以添加多個事件處理程序。

不同：

   1、IE的事件處理函數(shù)會在全局作用于執(zhí)行，所以this指向window，而DOM方法中this指向元素對象引用
   2、當(dāng)添加多個事件處理程序時：執(zhí)行的順序和DOM2級事件處理程序相反。

5、跨瀏覽器事件處理程序

為了保證事件處理的代碼能在大部分的瀏覽器下得到一致性的運(yùn)行，我們可以恰當(dāng)?shù)氖褂脼g覽器能力檢測能力封裝一個通用的事件處理程序添加函數(shù)。

let eventUtil = {
    addEventHandle(element, eventType, handle) {
        if (Object.prototype.toString.apply(handle) !== "[object Function]") {
            throw new TypeError("handle invaild")
        }
        if (!element.addEventListener) {
            element.addEventListener(eventType,handle)
        } else if (element.attachEvent) {
            element.attachEvent(`on${eventType}`,handle)
        } else{
            element[`on${eventType}`] = handle
        }

    },
    removeEventHandle(element, eventType, handle) {
        if (Object.prototype.toString.apply(handle) !== "[object Function]") {
            throw new TypeError("handle invaild")
        }
        if (!element.removeEventListener) {
            element.removeEventListener(eventType,handle)
        } else if (element.detachEvent) {
            element.detachEvent(`on${eventType}`,handle)
        } else{
            element[`on${eventType}`] = null
        }

    }
}

上面的代碼很簡單，首先判斷瀏覽器是否支持addEventHandle, 如果支持就用它來添加事件程序，否則再判斷attachEvent，如果還不支持只能用Dom0級事件添加， 但是針對IE8--使用attachEvent添加事件處理程序時，this的指向并沒有做處理，包括事件觸發(fā)的階段等。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89819.html

發(fā)表評論

登陸后可評論

0條評論

ddongjian0000

男|高級講師

我要關(guān)注我要私信

TA的文章

mitmproxy與安卓模擬器搭配，助力Python爬蟲工程師，然后就可以爬CSDN粉絲數(shù)據(jù)了

閱讀 3002·2021-11-25 09:43
EtherNetservers：洛杉磯VPS主機(jī)$12/年起,支持支付寶/PayPal

閱讀 3644·2021-08-31 09:41
小程序顯示彈窗時禁止下層的內(nèi)容滾動

閱讀 1259·2019-08-30 15:56
css變量賦值和取值的四種方式(js設(shè)置值、內(nèi)聯(lián)樣式、:root選擇器、html選擇器)

閱讀 2152·2019-08-30 15:55
Nuxt SSR 阿里云部署之nginx代理--詳解篇

閱讀 3015·2019-08-30 13:48
Codepen 每周精選：22個頁面特效（2018-5-2）

閱讀 2826·2019-08-29 15:15
【圖片版】CSS網(wǎng)格布局（Grid）完全教程

閱讀 999·2019-08-29 15:14
負(fù)margin的幾個問題

閱讀 2667·2019-08-28 18:26

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

深入理解js Dom事件機(jī)制（二）——添加事件處理程序

相關(guān)文章