jQuery源码分析之blur focus focusin focusout load resize scroll unload click dblclick等方法

blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu源码如下:

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 contextmenu").split(" "), function( i, name ) {
	// Handle event binding
	jQuery.fn[ name ] = function( data, fn ) {
		return arguments.length > 0 ?
			this.on( name, null, data, fn ) ://如果调用时候传入的只有一个函数,那么data就是这个函数,在on方法里对他进行调整!
			this.trigger( name );
	};
});

注意:从上面的代码可以知道,给on函数传递的第二个参数是null,也就是这些方法的API不能传递selector进行代理!

hover方法源码:

hover: function( fnOver, fnOut ) {
		return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
	}

总结:这些函数接受两个参数,一个是额外数据一个是回调函数。如果不传入参数,那么就是触发调用对象的所有的同类型方法,否则就是为调用对象添加事件!注意on方法底层调用的是jQuery.event.add方法!如果是添加函数那么调用时候可以获取到添加事件的所有属性!参见 点击打开链接

(1)回调函数中this指向当前元素!,也就是currentTarget。apply( matched.elem, args )是在dispatch里面的源码,但是因为这里用的是apply而不是call,所以直接把args逐个封装到回调函数中。这个args只有一个参数args[0]=event所以这里回调函数中唯一一个参数就是event,同时可以通过event.data获取数据,通过delegateTarget获取代理对象BODY。通过handleObj可以获取通过add方法添加的事件的所有信息,也就是通过add方法里面添加的handleObj所有属性!同时可以通过currentTarget获取当前所在的元素!总之一句话:在该回调函数中可以获取这个调用事件的所有的信息!

你可能感兴趣的:(jQuery源码分析之blur focus focusin focusout load resize scroll unload click dblclick等方法)