[转帖]Mootools源码分析-17 -- Element-4

原帖地址：http://space.flash8.net/space/?18713/viewspace-403269.html

原作者：我佛山人

 

// Element事件的setter，addEvents的快捷方式

Element.Properties.events  =  {set:  function (events)    {

     this .addEvents(events);

}};

// Element、Window 和 Document的事件扩展

Native.implement([Element, Window, Document], {

     // 添加事件监听，有别于addListener，可以使用自定义事件
    addEvent:  function (type, fn)    {
         // 取临时对象，注意提供的默认值
         var  events  =   this .retrieve( ' events ' , {});
         // 查找指定类型的事件列表
        events[type]  =  events[type]  ||  { ' keys ' : [],  ' values ' : []};
         // 如果已经添加了该监听
         if  (events[type].keys.contains(fn))     return   this ;
         // 添加到事件订阅列表
        events[type].keys.push(fn);
         var  realType  =  type, custom  =  Element.Events.get(type), condition  =  fn, self  =   this ;
         // 如果是自定义事件
         if  (custom)    {
         // 添加自定义事件时的处理
             if  (custom.onAdd)    custom.onAdd.call( this , fn);
         // 自定义事件的条件
             if  (custom.condition)    {
                condition  =   function (event)    {
                     if  (custom.condition.call( this , event))     return  fn.call( this , event);
                     return   false ;
                };
            }
            realType  =  custom.base  ||  realType;
        }
         var  defn  =   function ()    {
             return  fn.call(self);
        };
         // 内置事件类型处理    
         var  nativeEvent  =  Element.NativeEvents[realType]  ||   0 ;
         // 如果是内置的事件
         if  (nativeEvent)    {
             // 如果是交互事件
             if  (nativeEvent  ==   2 )    {
                 // 闭包
                defn  =   function (event)    {
                 // 这样最后传给监听函数的参数是经包装过Event对象
                    event  =   new  Event(event, self.getWindow());
                     // 这个条件用于扩展内置事件
                     if  (condition.call(self, event)  ===   false )    event.stop();
                };
            }
             // 最终还是调用addListener
             this .addListener(realType, defn);
        }
         // 添加到列表
        events[type].values.push(defn);
         return   this ;
    },


     // 移除事件监听

    removeEvent:  function (type, fn)    {

         // 取临时对象，不提供默认值
         var  events  =   this .retrieve( ' events ' );
         // 如果临时对象不存在，说明监听不存在，直接返回
         if  ( ! events  ||   ! events[type])     return   this ;
         // 检查是否已添加本监听
         var  pos  =  events[type].keys.indexOf(fn);
         // 没有则返回
         if  (pos  ==   - 1 )     return   this ;
         // 从队列中移除
         var  key  =  events[type].keys.splice(pos,  1 )[ 0 ];
         var  value  =  events[type].values.splice(pos,  1 )[ 0 ];
         // 自定义事件处理
         var  custom  =  Element.Events.get(type);
         // 如果是自定义事件
         if  (custom)    {
             // 自定义事件的移除处理
             if  (custom.onRemove)    custom.onRemove.call( this , fn);
            type  =  custom.base  ||  type;
        }
         // 如果是内置事件还需要调用removeListener来处理
         return  (Element.NativeEvents[type])  ?   this .removeListener(type, value) :  this ;
    },
    
     // 批量添加事件监听
    addEvents:  function (events)    {
         for  ( var  event  in  events)     this .addEvent(event, events[event]);
         return   this ;
    },

// 批量移除事件监听
    removeEvents:  function (type)    {
         // 取临时对象，不提供默认值
         var  events  =   this .retrieve( ' events ' );
         // 没有事件监听直接返回
         if  ( ! events)     return   this ;
         // 如果不提供type参数，移除所有类型的事件
         if  ( ! type)    {
             for  ( var  evType  in  events)  this .removeEvents(evType);
            events  =   null ;
        }     else   if  (events[type])    {
             // 移除指定类型的事件
             while  (events[type].keys[ 0 ])     this .removeEvent(type, events[type].keys[ 0 ]);
            events[type]  =   null ;
        }
         return   this ;
    },

     // 事件通知
    fireEvent:  function (type, args, delay)    {
         // 取临时对象，不提供默认值
         var  events  =   this .retrieve( ' events ' );
         // 没有事件监听
         if  ( ! events  ||   ! events[type])     return   this ;
        events[type].keys.each( function (fn)    {
             // 注意事件监听的函数中this默认指向当前Element
            fn.create({ ' bind ' :  this ,  ' delay ' : delay,  ' arguments ' : args})();
        },  this );
         return   this ;
    },

     // 事件复制
    cloneEvents:  function (from, type)    {
         // 事件源
        from  =  $(from);
         var  fevents  =  from.retrieve( ' events ' );
         if  ( ! fevents)     return   this ;
         // 不提供type参数则复制所有事件
         if  ( ! type)    {
             for  ( var  evType  in  fevents)     this .cloneEvents(from, evType);
        }     else   if  (fevents[type])    {
         // 复制指定类型的事件
            fevents[type].keys.each( function (fn)    {
                 this .addEvent(type, fn);
            },  this );
        }
         return   this ;
    }
});


// 内置事件，分两种类型

Element.NativeEvents  =  {
    click:  2 , dblclick:  2 , mouseup:  2 , mousedown:  2 , contextmenu:  2 ,  // mouse buttons
    mousewheel:  2 , DOMMouseScroll:  2 ,  // mouse wheel
    mouseover:  2 , mouseout:  2 , mousemove:  2 , selectstart:  2 , selectend:  2 ,  // mouse movement
    keydown:  2 , keypress:  2 , keyup:  2 ,  // keyboard
    focus:  2 , blur:  2 , change:  2 , reset:  2 , select:  2 , submit:  2 ,  // form elements
    load:  1 , unload:  1 , beforeunload:  1 , resize:  1 , move:  1 , DOMContentLoaded:  1 , readystatechange:  1 ,  // window
    error:  1 , abort:  1 , scroll:  1   // misc
};

// 就地执行的匿名函数
( function ()    {
     var  $check  =   function (event)    {
         var  related  =  event.relatedTarget;
         if  (related  ==  undefined)     return   true ;
         if  (related  ===   false )     return   false ;
         return  ($type( this )  !=   ' document '   &&  related  !=   this   &&  related.prefix  !=   ' xul '   &&   ! this .hasChild(related));
    };

     // 基于原事件扩展出的自定义事件
    Element.Events  =   new  Hash({
         // 鼠标进入事件
        mouseenter: {
            base:  ' mouseover ' ,
            condition: $check
        },
         // 鼠标离开事件
        mouseleave: {
            base:  ' mouseout ' ,
            condition: $check
        },
// 鼠标滚轮事件
        mousewheel: {
            base: (Browser.Engine.gecko)  ?   ' DOMMouseScroll '  :  ' mousewheel '
        }
    });
})();

 

转载于:https://www.cnblogs.com/maapaa/articles/mootools-s-17.html