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

qianfeng 發布于2019-08-01 18:00 / 1811人閱讀

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

深入理解js Dom事件機制（一）——事件流

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

1、HTML事件處理程序

這個很簡單，大家基本初學js的時候都應該用過，就不再贅述，直接看實例代碼




    
    Html事件處理程序

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

缺點：

存在時差問題，當用戶在元素出現在頁面就觸發事件，但有可能這個時候事件處理程序不具備執行的條件。

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

2、DOM0級事件處理程序

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




    
    DOMO級事件處理程序

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

3、DOM2級事件處理程序

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




    
    DOM2級事件處理程序

從上述代碼中可以看出：

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

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

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

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




    
    IE事件處理程序

與DOM2級方法的異同

相同：

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

不同：

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

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

為了保證事件處理的代碼能在大部分的瀏覽器下得到一致性的運行，我們可以恰當的使用瀏覽器能力檢測能力封裝一個通用的事件處理程序添加函數。

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的指向并沒有做處理，包括事件觸發的階段等。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51521.html

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

摘要：深入理解事件機制一事件流事件就是當用戶或者瀏覽器自身執行的某種動作，諸如等都是事件的名稱，那響應個事件的函數就稱為事件處理程序事件處理函數事件句柄。深入理解js Dom事件機制（一）——事件流事件就是當用戶或者瀏覽器自身執行的某種動作，諸如 click、mouseover等都是事件的名稱，那響應個事件的函數就稱為事件處理程序（事件處理函數、事件句柄）。事件處理程序的名字都是以on...

ddongjian0000 2019-08-21 17:39 評論0 收藏0
由setTimeout深入JavaScript執行環境的異步機制

摘要：圖片轉引自的演講和兩個定時器中回調的執行邏輯便是典型的機制。異步編程關于異步編程我的理解是，在執行環境所提供的異步機制之上，在應用編碼層面上實現整體流程控制的異步風格。問題背景在一次開發任務中，需要實現如下一個餅狀圖動畫，基于canvas進行繪圖，但由于對于JS運行環境中異步機制的不了解，所以遇到了一個棘手的問題，始終無法解決，之后在與同事交流之后才恍然大悟。問題的根節在于經典的J...

codeGoogle 2019-08-21 18:29 評論0 收藏0
深入理解js Dom事件機制（一）——事件流

摘要：事件捕獲提出的事件流模型稱為事件捕獲。事件代理則是一種簡單有效的技巧，通過它可以把事件處理器添加到一個父級元素上，從而避免把事件處理器添加到多個子級元素上。更新無需重新綁定事件處理器，因為事件代理對不同子元素可采用不同處理方法。首先我們思考一個很有意思的事情：一張紙上畫了兩個同心圓，當我們把手指放到圓心上時，手指指向的不是一個圓，而是紙上的兩個圓，同理之，當我們單擊網頁上的一個div...

OBKoro1 2019-08-21 17:34 評論0 收藏0
深入前端-徹底搞懂瀏覽器運行機制

摘要：當這些異步任務發生的時候，它們將會被放入瀏覽器的事件任務隊列中去，等到運行時執行線程空閑時候才會按照隊列先進先出的原則被一一執行，但終究還是單線程。瀏覽器是多進程的 showImg(https://segmentfault.com/img/remote/1460000019706956?w=815&h=517); Browser進程：瀏覽器的主進程（負責協調、主控），只有一個。負...

Youngs 2019-08-23 18:34 評論0 收藏0
深入前端-徹底搞懂瀏覽器運行機制

摘要：當這些異步任務發生的時候，它們將會被放入瀏覽器的事件任務隊列中去，等到運行時執行線程空閑時候才會按照隊列先進先出的原則被一一執行，但終究還是單線程。瀏覽器是多進程的 showImg(https://segmentfault.com/img/remote/1460000019706956?w=815&h=517); Browser進程：瀏覽器的主進程（負責協調、主控），只有一個。負...

YPHP 2019-08-02 15:30 評論0 收藏0