关于js封装框架类库之事件模块

在触发DOM上的某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。

例如：

• 鼠标操作点击事件时，事件对象中会获得鼠标的按键信息等，会提示按的哪一个键

获得鼠标按键属性button和which

鼠标左中右按键分别对应：在谷歌浏览器中   button：左键 0 右键 2 中键 1  ，which：左键 1 右键 3 中键 2

ie8及以下：左键 1 右键 2 中键 4，which属性不存在

• 用户在操作键盘时，事件对象中会获得操作键盘的一切信息

• 添加一个click事件，封装一个方法，简单的可以这么做（在这不引入之前的框架了）

//封装一个click事件(只能添加一次)
                YY.fn.extend({
                click: function ( callback ) {
                    // 要给 每一个 dom 元素添加 事件处理程序 callback
                    this.each(function () {
                        this.onclick = callback;
                    });
                }
            });
            
            //添加多个click的事件(点击一次触发多个事件)
            YY.fn.extend({
                click: function ( callback ) {
                    // 要给 每一个 dom 元素添加 事件处理程序 callback
                    this.each(function () {
                        this.addEventListener( 'click', callback );
                    });
                    return this;
                }
            });

• 同理其他事件也可这么实现，但是代码冗余，所以，在这进行了一次升级

// 事件模块
YY.fn.extend({
    on: function ( type, callback ) {
        
        
        this.each( function () {
            if ( this.addEventListener ) {//ie8不兼容addEventListener
                this.addEventListener( type, callback );
            } else {
                this.attachEvent( 'on' + type, callback );//在这必须用on
            }
        });
        return this; // 当前对象
    },
    off: function () {
        this.each( function () {
            this.removeEventListener( type, callback );
        });
        return this;
    }
});

那么我们可以用以上工具函数，很轻松的可以封装一些方法了，如下

// 对一些常见事件的封装
// click, mouseover, mousemove, mousedown, mouseup, keydown, keyup
YY.each( ("click,mouseover,mouseout,mouseenter,mouseleave," + 
              "mousemove,mousedown," + 
              "mouseup,keydown,keyup" ).split(','), function ( i, v ) {
                  
    YY.fn[ v ] = function ( callback ) {
        return this.on( v, callback );
    }
      
});


// toggle 与 hover
YY.fn.extend({
    hover: function ( fn1, fn2 ) {
        return this.mouseover( fn1 ).mouseout( fn2 );
    },
    toggle: function () {
        var args = arguments,//传入实参的个数
        i = 0;
        
        return this.click(function ( e ) {//e是系统提供的
            args[ i++ % args.length ].call( this, e );//在这里取余就是让每个实参都执行一次，此时this一直指向dom对象
        });
        
    }
});

• onload事件的封装

var loadEvent = [];    //提供一个空数组存储函数
window.onload = function () {
    for ( var i = 0; i < loadEvent.length; i++ ) {
        loadEvent[ i ]();
    }
};
    
// 构造函数
var YY = function YY ( selector ) {
    return new YY.fn.init( selector );
};
// 核心原型
YY.fn = YY.prototype = {
    constructor: YY,
    selector: null,
    length: 0,
    init: function ( selector ) {
        
        //判断是否为函数,再把函数绑定到window.onload
        if ( YY.isFunction( selector ) ) {
            loadEvent.push( selector );//将函数都加入数组中
        }
    },
    
};
YY.fn.init.prototype = YY.prototype;