自定义事件

原本的事件处理的原理：事件是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高级技巧----自定义事件