js高级技巧自定义事件

自定义事件

原本的事件处理的原理：事件是javascript与浏览器交互的主要途径。

        事件是一种叫做观察者的设计模式

        观察者模式由两类对象组成：主体和观察者。

                         主体用于发布事件；

                         观察者通过订阅这些事件来观察该主体。

自定义事件的原理：

        将事件处理程序保存在一个数组中；

         当添加事件的时候，我们push进去这个事件处理函数；

         当我们执行的时候，从头遍历这个数组中的每个事件处理函数，并执行。

 

自定义事件应该具有的内容：

      1.一个handler对象，对象中保存着存放事件处理函数的数组

        handler = {

          ‘click’ : [func1,func2],

          ‘my’ : [func3,func4]

        }

      2.一个addhandler函数，用于添加事件处理函数

      3.一个removehandler函数，用于删除事件处理函数

      4.一个fire函数，用于执行所添加的函数。

 

注：使用原型模式来创建自定义事件对象。

 代码如下：

function EventTarget(){
    /*
    * handlers:用来存储时间处理程序
    */
    this.handlers = {};
}
EventTarget.prototype = {
    constructor : EventTarget,
    /*
    * addHandler:用于注册给定类型事件的事件处理程序
    * type:自定义的事件类型，任意字符串
    * handler：自定义的事件处理函数
    */
    addHandler : function( type,handler ){
        if( typeof this.handlers[type] == "undefined" ){
            this.handlers[type] = [];
        }
        this.handlers[type].push( handler );
    },
    /*
    * fire:用于触发一个事件
    * event:是一个事件对象，可以自定义它拥有的属性
    */
    fire : function( event ){
        if( !event.target ){
            event.target = this;
        }
        if( this.handlers[event.type] instanceof Array){
            var handlers = this.handlers[event.type];
            for( var i=0,len=handlers.length;i<len;i++ ){
                handlers[i]( event );
            }
        }
    },
    /*
    * removeHandler:用于注销某个事件类型的事件处理程序
    */
    removeHandler : function( type,handler ){
        if( this.handlers[type] instanceof Array ){
            var handlers = this.handlers[type];
            for( var i=0,len=handlers.length;i<len;i++ ){
                if( handlers[i] == handler){
                    break;
                }
            }
            handlers.splice( i,1 );
        }
    }
}

 

扩展：(详细参见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高级程序设计》