關於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;