天天看點

Javascript事件機制相容性解決方案

 本文的解決方案可以用于javascript native對象和宿主對象(dom元素),通過以下的方式來綁定和觸發事件:

  

Javascript事件機制相容性解決方案

  或者

after函數

  為native對象添加事件的過程主要在after函數中完成,這個函數主要做了以下幾件事:

如果obj中已有響應函數,将其替換成dispatcher函數

使用鍊式結構,保證多次綁定事件函數的順序執行

傳回一個handle對象,調用remove方法可以去除本次事件綁定

  下圖為after函數調用前後onlog函數的引用

    

Javascript事件機制相容性解決方案

      (調用前)

Javascript事件機制相容性解決方案

      (調用後)

  詳細解釋請看注釋,希望讀者能夠跟着運作一遍

解決相容性

  ie浏覽器從ie9開始已經支援dom2事件處理程式,但是對于老版本的ie浏覽器,任然使用attachevent方式來為dom元素添加事件。值得慶幸的是微軟已宣布2016年将不再對ie8進行維護,對于廣大前端開發者無疑是一個福音。然而在曙光來臨之前,仍然需要對那些不支援dom2級事件處理程式的浏覽器進行相容性處理,通常需要處理以下幾點:

多次綁定一個事件,事件處理函數的調用順序問題

事件處理函數中的this關鍵字指向問題

标準化event事件對象,支援常用的事件屬性

  由于使用attachevent方法添加事件處理函數無法保證事件處理函數的調用順序,是以我們棄用attachevent,轉而用上文中的after生成的正序鍊式結構來解決這個問題。

Javascript事件機制相容性解決方案

   本文也是通過這種方式解決此問題

對于事件對象的标準化,我們需要将ie提供給我們的現有屬性轉化為标準的事件屬性。

Javascript事件機制相容性解決方案
Javascript事件機制相容性解決方案

  注意這裡不能直接寫成這種形式,上文中fixlistener也是同樣道理。

Javascript事件機制相容性解決方案

  需要注意一點,我們将event标準化目的還有一點,可以在emit方法中設定參數來控制事件過程,比如:

  evt.emit(input, 'click');//不冒泡

  evt.emit(input, 'click', {bubbles: true});//冒泡

  根據我的測試使用fireevent方式觸發事件,無法設定{bubbles:false}來阻止冒泡,是以這裡我們用javascript來模拟冒泡過程。同時在這個過程中也要保證event對象的唯一性。

  附上完整代碼:

歡迎各位有志之士前來交流探讨!

參考文章:

<a href="http://www.cnblogs.com/yexiaochai/p/3567597.html">【前端盲點】事件的幾個階段你真的了解麼???</a>

<a href="http://www.nowamagic.net/javascript/js_eventmechanismindetail.php">javascript事件機制詳細研究 </a>

<a href="http://www.cnblogs.com/hustskyking/p/problem-javascript-event.html">[解惑]javascript事件機制</a>

繼續閱讀