jQuery- 代码片 2650 1

【代码片-1】 jQuery源码学习(版本1.11)-事件处理-实例函数

作者:wfbob

标签:事件处理    jquery    实例    函数    事件    

// 实例对象的事件处理方法
jQuery.fn.extend({

	// 绑定事件方法on(参数one仅限是内部使用,JQ实例对象需要的话可以直接调用后面的one方法)
	on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
		var type, origFn;

		// 支持types传入一个map,里面保存types/handlers的场景
		if ( typeof types === "object" ) {
			// selector不为string的场景( types-Object, selector, data )
			if ( typeof selector !== "string" ) {
				// 重定义data,假设data为空,则data = selector,( types-Object, data )
				data = data || selector;
				// 置空selector
				selector = undefined;
			}
			// 遍历对象里的事件类型,逐一调用on
			for ( type in types ) {
				this.on( type, selector, data, types[ type ], one );
			}
			return this;
		}

		// data跟fn同时为空的场景
		if ( data == null && fn == null ) {
			// ( types, fn )
			fn = selector;
			data = selector = undefined;
		} else if ( fn == null ) {
			if ( typeof selector === "string" ) {
				// ( types, selector, fn )
				fn = data;
				data = undefined;
			} else {
				// ( types, data, fn )
				fn = data;
				data = selector;
				selector = undefined;
			}
		}
		if ( fn === false ) {
			fn = returnFalse;
		} else if ( !fn ) {
			return this;
		}

		// 传入了one的场景
		if ( one === 1 ) {
			// 先引用原回调
			origFn = fn;
			// 定义新回调,封装原回调
			fn = function( event ) {
				// 去除绑定
				jQuery().off( event );
				// 执行回调
				return origFn.apply( this, arguments );
			};
			// 从之前分析的jQuery.event代码可知,回调里面保存guid,删除的时候用于会判断,这样才知道解除绑定的是不是同一个回调函数
			fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ );
		}
		
		// 以上各种选择判断分支,均是对不同入参场景进行分类处理
		// 最终还是调用each方法,对JQ对象里的每一个元素,执行jQuery.event.add增加绑定事件
		return this.each( function() {
			jQuery.event.add( this, types, fn, data, selector );
		});
	},
	// one方法,表明事件回调只处理一次
	one: function( types, selector, data, fn ) {
		return this.on( types, selector, data, fn, 1 );
	},
	// 解除事件绑定off
	off: function( types, selector, fn ) {
		var handleObj, type;
		if ( types && types.preventDefault && types.handleObj ) {
			// ( event )  dispatched jQuery.Event
			handleObj = types.handleObj;
			jQuery( types.delegateTarget ).off(
				handleObj.namespace ? handleObj.origType + "." + handleObj.namespace : handleObj.origType,
				handleObj.selector,
				handleObj.handler
			);
			return this;
		}
		if ( typeof types === "object" ) {
			// ( types-object [, selector] )
			for ( type in types ) {
				this.off( type, selector, types[ type ] );
			}
			return this;
		}
		if ( selector === false || typeof selector === "function" ) {
			// ( types [, fn] )
			fn = selector;
			selector = undefined;
		}
		if ( fn === false ) {
			fn = returnFalse;
		}
		
		// 前面也是兼容各种入参的场景
		// 最终同样是使用each对JQ对象每个元素调用jQuery.event.remove解除绑定
		return this.each(function() {
			jQuery.event.remove( this, types, fn, selector );
		});
	},

	// 触发事件方法trigger
	trigger: function( type, data ) {
		// 直接使用each方法调用jQuery.event.trigger
		return this.each(function() {
			jQuery.event.trigger( type, data, this );
		});
	},
	// 会影响到前面event.isTrigger的值,用途暂时不明
	triggerHandler: function( type, data ) {
		var elem = this[0];
		if ( elem ) {
			return jQuery.event.trigger( type, data, elem, true );
		}
	}
});
发表评论

1个评论

  • u013047005

    感谢分享

    2016-06-29 22:44:28回复

我要留言×

技术领域:

我要留言×

留言成功,我们将在审核后加至投票列表中!

提示x

jQuery知识库已成功保存至我的图谱现在你可以用它来管理自己的知识内容了

删除图谱提示×

你保存在该图谱下的知识内容也会被删除,建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗?

删除节点提示×

无法删除该知识节点,因该节点下仍保存有相关知识内容!

删除节点提示×

你确定要删除该知识节点吗?