jQuery - это, по сути, оболочка, которая возвращает объект множеством методов. Большинство из них не так просты, если вы хотите глубже понять, у вас нет выбора, кроме как использовать консоль и просмотреть исходный код, который вы можете найти здесь: https://code.jquery.com/jquery-1.12.4.js. В идеале, используйте несжатую версию , Для некоторых методов это может быть довольно долго, чтобы докопаться до сути. Как работает обратный вызов Click, скрыто довольно глубоко.
Вы можете найти это так:
В консоли введите $ ("p"). Щелкните. Вы получите:
ƒ ( 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 ) {
// Handle event binding
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
- это "щелчок", а data
- ваша функция ( событие). Итак, на 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
- "щелчок", selector
- ноль, data
- ваш function(e)
и fn
- ноль. Это приводит к:
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
обратный вызов имеет параметр event
, который является нативным javascript. В 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 ) {
// Make a writable jQuery.Event from the native event object
event = jQuery.event.fix( event );
...
Так что же это за событие.fix:
fix: function( event ) {
if ( event[ jQuery.expando ] ) {
return event;
}
// Create a writable copy of the event object and normalize some properties
var i, prop, copy,
type = event.type,
originalEvent = event,
fixHook = this.fixHooks[ type ];
Здесь вы найдете
event = new jQuery.Event( originalEvent );
jQuery.Event = function( src, props ) {
...
Где определяется event
, который передается как параметр click
. Вы можете проверить это, добавив свойства на jQuery.Event.prototype
. Вот так например:
jQuery.Event.prototype.prop = 'newProp';
Итак, подведем итог: событие в функции (event) является экземпляром jQuery.Event.
См.
Для Ajax это, вероятно, немного проще, но, опять же, если вы хотите точно знать, вы можете сделать немного больше, кроме как просмотреть исходный код.