jQuery基本上是一个包装器,返回一个具有许多方法的对象。其中大部分都不是那么直接,如果你想更深入地了解,除了使用控制台并浏览源代码(可以在此处找到:
https://code.jquery.com/jquery-1.12.4.js),你别无选择。理想情况下,使用未压缩版本。对于某些方法,要完全理解可能需要花费相当长的时间。点击回调函数的工作方式被隐藏得很深。
您可以通过以下方式找到它:
在控制台中输入$("p").click。您会得到:
ƒ ( data, fn ) {
return arguments.length > 0 ?
this.on( name, null, data, fn ) :
this.trigger( name );
}
这段文本的英译为:
它来自于源代码中的这里:
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 ) {
jQuery.fn[ name ] = function( data, fn ) {
return arguments.length > 0 ?
this.on( name, null, data, fn ) :
this.trigger( name );
};
} );
因为你至少有一个参数,所以它运行:
this.on( name, null, data, fn )
,其中
this
是您的jQuery对象$('p'),
name
是'click',
data
是您的函数(event)。 所以接下来是
this.on()
:
console.log($('p').on);
ƒ ( types, selector, data, fn ) {
return on( this, types, selector, data, fn );
}
这里,
function on
不是全局的,所以它在 jQuery 的闭包中,因此回到源代码,你可以找到:
function on( elem, types, selector, data, fn, one ) {
...
其中elem
是您的jQuery对象$('p')
,types
是'click',selector
为null,data
是您的function(e)
,fn
为null。这将导致:
elem.each( function() {
jQuery.event.add( this, types, fn, data, selector );
} );
所以你可以找到:
jQuery.event = {
global: {},
add: function( elem, types, handler, data, selector ) {
...
你可以在哪里找到addEventListener
:
elem.addEventListener( type, eventHandle, false );
在
addEventListener
中,回调函数有一个原生的 JavaScript 参数
event
。在 jQuery 中,回调函数是
eventHandle
,因此让我们找到这个函数:
eventHandle = elemData.handle = function( e ) {
// Discard the second event of a jQuery.event.trigger() and
// when an event is called after a page has unloaded
return typeof jQuery !== "undefined" &&
( !e || jQuery.event.triggered !== e.type ) ?
jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :
undefined;
};
所以它返回函数
dispatch
,现在回调函数是这样的:
jQuery.event.dispatch.apply( eventHandle.elem, arguments )
,其中
arguments
是
e
(原始的
addEventListener
事件)。因此找到
dispatch
:
dispatch: function( event ) {
event = jQuery.event.fix( event );
...
这是什么事件修复(event.fix)?
fix: function( event ) {
if ( event[ jQuery.expando ] ) {
return event;
}
var i, prop, copy,
type = event.type,
originalEvent = event,
fixHook = this.fixHooks[ type ];
在这里你会找到。
event = new jQuery.Event( originalEvent );
jQuery.Event = function( src, props ) {
...
在click
的参数中传递的event
是如何定义的。您可以通过在jQuery.Event.prototype
上添加属性来进行测试。例如:
jQuery.Event.prototype.prop = 'newProp'
因此,总结一下,在function(event)中的事件是jQuery.Event的一个实例。
请参见
console.log($('p').click);
console.log($('p').on);
console.log(jQuery.Event)
jQuery.Event.prototype.prop = 'test';
$('p').click(function(event){console.log(event.prop)});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<p>test</p>
对于Ajax来说,可能会更加简单一些,但是如果你想要确切的了解,除了查看源代码外,没有其他办法。