jQuery源碼分析-10事件處理-Event-源碼結構

 

作者：nuysoft/高雲　QQ：47214707　EMail：nuysoft@gmail.com

 

 

10.2        源碼結構

jQuery的事件模組主要包含以下內容：

 

 

 子模組

 介面

 

1

 事件管理工具函數

 jQuery.event.add/remove/trigger/handle/fix/special

 

2

 事件對象

 jQuery.Event（類比實現部分DOM3事件介面）

 

3

 事件特例

 ready live beforeunload

 

mouseenter mouseleaver（修正為mouseover mouseout）

 

focusin focusout submit change（瀏覽器不支援的冒泡事件）

 

4

 事件綁定、刪除、觸發

 bind one delegate live die

 

unbind undelegate die

 

trigger triggerHandler

 

5

 便捷事件和擴充方法

 toggle hover等

 

 

 

 

看看源碼結構：

 

// ----------------------------------------------------------------------------

 

// ①事件管理工具函數

 

// ----------------------------------------------------------------------------

 

 

 

jQuery.event = {

 

    // 綁定事件控制代碼

 

    add: function( elem, types, handler, data ) {},

 

    // 刪除

 

    remove: function( elem, types, handler, pos ) {},

 

    // 觸發

 

    trigger: function( event, data, elem, onlyHandlers ) {},

 

    // 執行

 

    handle: function( event ) {},

 

    // 事件屬性

 

    props: "altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode layerX layerY metaKey newValue offsetX offsetY pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "),

 

    // 使用jQuery.Event封裝原始事件，並修正屬性

 

    fix: function( event ) {},

 

    // 事件特例，共九個：ready live beforeunload mouseenter mouseleaver focusin focusout submit change

 

    special: {

 

       ready: {},

 

       live: {},

 

       beforeunload: {}

 

    }

 

};

 

 

 

// ----------------------------------------------------------------------------

 

// ②jQuery事件對象，類比實現部分W3C標準的DOM 3層級事件模型，統一了事件的屬性

 

// ----------------------------------------------------------------------------

 

 

 

jQuery.Event = function( src, props ) {};

 

// jQuery事件對象原型

 

jQuery.Event.prototype = {

 

    // 阻止預設瀏覽器預設行為

 

    preventDefault: function() {},

 

    // 停止事件傳播

 

    stopPropagation: function() {},

 

    // 立即停止事件傳播

 

    stopImmediatePropagation: function() {},

 

    // 是否封鎖瀏覽器預設行為

 

    isDefaultPrevented: returnFalse,

 

    // 是否已停止事件傳播

 

    isPropagationStopped: returnFalse,

 

    // 是否已立即停止事件傳播

 

    isImmediatePropagationStopped: returnFalse

 

};

 

 

 

// ----------------------------------------------------------------------------

 

// ③事件特例

 

// ----------------------------------------------------------------------------

 

 

 

// 建立mouseenter mouseleave事件，將mouseenter修正為mouseover，mouseleave修正為mouseout

 

jQuery.each({

 

    mouseenter: "mouseover",

 

    mouseleave: "mouseout"

 

}, function( orig, fix ) {});

 

 

 

// submit事件代理，如果不支援submit事件冒泡

 

if ( !jQuery.support.submitBubbles ) {}

 

 

 

// change事件代理，如果不支援change事件冒泡

 

if ( !jQuery.support.changeBubbles ) {}

 

 

 

// 觸發元素elem上指定類型type的事件控制代碼和預設行為

 

function trigger( type, elem, args ) {}

 

 

 

// 如果不支援focusin事件冒泡，則轉為focus實現（focusin →focus, focusout →blur）

 

if ( !jQuery.support.focusinBubbles ) {

 

    jQuery.each({ focus: "focusin", blur: "focusout" }, function( orig, fix ) {});

 

}

 

 

 

// ----------------------------------------------------------------------------

 

// ④事件綁定、刪除、觸發

 

// ----------------------------------------------------------------------------

 

 

 

// 在匹配的元素上綁定指定類型的事件處理函數

 

jQuery.each(["bind", "one"], function( i, name ) {

 

    jQuery.fn[ name ] = function( type, data, fn ) {};

 

});

 

 

 

jQuery.fn.extend({

 

    // 解除綁定定：刪除一個之前附加的事件控制代碼

 

    unbind: function( type, fn ) {},

 

    // 事件代理，調用live方法實現

 

    delegate: function( selector, types, data, fn ) {},

 

    // 刪除事件代理，調用unbind或die實現

 

    undelegate: function( selector, types, fn ) {},

 

    // 執行事件處理函數和預設行為

 

    trigger: function( type, data ) {},

 

    // 執行事件處理函數，不執行預設行為，只觸發匹配的第一個元素，不返回jQuery對象

 

    triggerHandler: function( type, data ) {},

 

    // 在匹配的元素繫結兩個或更多的事件處理函數，點擊事件觸發時，這些函數順序依次迴圈執行

 

    toggle: function( fn ) {},

 

    // 便捷方法，在匹配的元素上綁定兩個事件處理函數，滑鼠移入時執行handlerIn，移出時執行handlerOut

 

    hover: function( fnOver, fnOut ) {}

 

});

 

 

 

// live 在匹配當前選取器的元素上綁定一個事件處理函數，包括已經存在的，和未來添加的，即任何添加的元素只要匹配當前選取器就會被綁定事件處理函數

 

// die 移除用live附加的一個或全部事件處理函數

 

jQuery.each(["live", "die"], function( i, name ) {});

 

// live執行控制代碼

 

function liveHandler( event ) {}

 

// 在live事件類型type後增加上selector，作為命名空間

 

function liveConvert( type, selector ) {}

 

 

 

// ----------------------------------------------------------------------------

 

// ⑤常用事件的便捷介面，綁定或觸發

 

// ----------------------------------------------------------------------------

 

 

 

jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +

 

    "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +

 

    "change select submit keydown keypress keyup error").split(" "), function( i, name ) {

 

    // Handle event binding

 

    jQuery.fn[ name ] = function( data, fn ) {

 

       return arguments.length > 0 ?

 

           this.bind( name, data, fn ) :

 

           this.trigger( name );

 

    };

 

    // 將事件名註冊（添加）到jQuery.attrFn，當遇到對同名屬性的操作時，轉換為對事件介面的調用

 

    if ( jQuery.attrFn ) {

 

       jQuery.attrFn[ name ] = true;

 

    }

 

});