js進階技巧----自訂事件

標籤：style   blog   http   color   io   使用   ar   java   for   

自訂事件

原本的事件處理的原理：事件是javascript與瀏覽器互動的主要途徑。

        事件是一種叫做觀察者的設計模式

        觀察者模式由兩類對象組成：主體和觀察者。

                         主體用於發布事件；

                         觀察者通過訂閱這些事件來觀察該主體。

自訂事件的原理：

        將事件處理常式儲存在一個數組中；

         當添加事件的時候，我們push進去這個事件處理函數；

         當我們執行的時候，從頭遍曆這個數組中的每個事件處理函數，並執行。

 

自訂事件應該具有的內容：

      1.一個handler對象，對象中儲存著存放事件處理函數的數組

        handler = {

          ‘click’ : [func1,func2],

          ‘my’ : [func3,func4]

        }

      2.一個addhandler函數，用於添加事件處理函數

      3.一個removehandler函數，用於刪除事件處理函數

      4.一個fire函數，用於執行所添加的函數。

 

註：使用原型模式來建立自訂事件對象。

 代碼如下：

 1 function EventTarget(){ 2     /* 3     * handlers:用來儲存時間處理常式 4     */ 5     this.handlers = {}; 6 } 7 EventTarget.prototype = { 8     constructor : EventTarget, 9     /*10     * addHandler:用於註冊給定類型事件的事件處理常式11     * type:自訂的事件類型，任一字元串12     * handler：自訂的事件處理函數13     */14     addHandler : function( type,handler ){15         if( typeof this.handlers[type] == "undefined" ){16             this.handlers[type] = [];17         }18         this.handlers[type].push( handler );19     },20     /*21     * fire:用於觸發一個事件22     * event:是一個事件對象，可以自訂它擁有的屬性23     */24     fire : function( event ){25         if( !event.target ){26             event.target = this;27         }28         if( this.handlers[event.type] instanceof Array){29             var handlers = this.handlers[event.type];30             for( var i=0,len=handlers.length;i<len;i++ ){31                 handlers[i]( event );32             }33         }34     },35     /*36     * removeHandler:用於登出某個事件類型的事件處理常式37     */38     removeHandler : function( type,handler ){39         if( this.handlers[type] instanceof Array ){40             var handlers = this.handlers[type];41             for( var i=0,len=handlers.length;i<len;i++ ){42                 if( handlers[i] == handler){43                     break;44                 }45             }46             handlers.splice( i,1 );47         }48     }49 }

 

擴充：(詳細參見http://www.zhangxinxu.com/wordpress/?p=2330）

DOM自訂事件：如為某個元素添加一個自訂的事件。

基本格式如下：

      var $ = function(el) {

           return new _$(el);

           };

      var _$ = function(el) {

          this.el = el;

      }; 

     _$.prototype = {

          constructor: this,

          addEvent: function() {  // ...}, 

         fireEvent: function() {  // ... }, 

         removeEvent: function() {  // ... } 

      }

於是我們就可以使用類似$(dom).addEvent()的文法為元素添加事件

 

重點：fireEvent()方法

      1.對於標準瀏覽器

        eve = document.createEvent( ‘HTMLEvents’ )：返回新建立的event對象

        eve.initEvent( eventType,canBubble ,preventDefault  )：初始化對象

        element.dispatchEvent( eve )：在元素上觸發事件

        （註：關於creatEvent()更多說明參考：http://blog.csdn.net/jxst051665/article/details/3931598

      2.對於IE瀏覽器

        "propertychange"事件，就是屬性改變即觸發的事件

 

代碼地址：https://github.com/xiaoxiaojing/practiseCode/blob/master/advancedSkills/custom_event.js

參考文章：http://www.zhangxinxu.com/wordpress/?p=2330

參考書籍：《js進階程式設計》

js進階技巧----自訂事件