[原创] jQuery源码分析-10事件处理-Event-源码结构

作者：nuysoft/高云　QQ：47214707　EMail：[e-mail]

声明：本文为原创文章，如需转载，请注明来源并保留原文链接。 

 

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;

    }

});

 

未完待续

评论

1 楼 chemandy 2012-01-06  

条理清晰，帮助很大。加油！我研究完jq源码后也准备回头做做笔记。谢谢分享了！