JQuery 的数据从哪里来？

Question

我见过很多使用参数函数参数的JQuery函数。即使我使用它们，在不知道它在后端如何工作的情况下感觉相当不完整。 例如，让我们使用 click 方法：

$("p").click(function(event){
    event.preventdefault();
    alert("testing 123");
});

在这段代码中，如果我在方法中使用“this”，它会给我“p”元素本身。 但是，我无法弄清楚“事件”参数被分配了一些东西。 不应该有一些地方的代码有点像

var event = blah blah;

让事件参数有一些值？

我通过按 f12 单击了实际的 JQuery 文件，它转到了这样的函数

jQuery.fn[ name ] = function( data, fn ) {
    return arguments.length > 0 ?
        this.on( name, null, data, fn ) :
        this.trigger( name );
};

我看不到那个填充或分配给名为“事件”的参数的任何地方

我对 $.ajax 请求也有同样的问题，

$.ajax({
    type: "POST",
    url: url, 
    async: false,
    success: function (data) {  }
});

可见在“data”参数中加载“data”的地方，实际数据是如何填写的，在哪里填写？我们什么时候加载实际数据。 我见过一些类似的问题。

Answer 1

关于您的第一个问题，关于event 参数，event 是您的点击。它永远不会像普通变量一样被显式声明。它只是一个参数，在您的示例中，点击就是事件。

关于您的 ajax 问题，data 参数是成功发布后从您的后端返回的内容。例如，我使用 ajax 调用从我的前端发送一些信息。然后我的后端使用该信息将数据发送回success: function(data) 内的前端，例如 JSON。 JSON 将是 data 参数。

Answer 2

声明发生在函数参数本身中。

在函数参数中声明 data、event 或任何您想调用的名称（任何字都可以），实际上是 var data = ... 语句。

在事件处理程序的实例中，event 由浏览器传递给任何锁定该事件的函数。在 ajax 调用的情况下，正如@Alec 所说，这是从服务器返回的数据。

Answer 3

jQuery 基本上是一个包装器，它返回一个带有许多方法的对象。它们中的大多数都不是那么简单，如果您想更深入地理解，除了使用控制台并浏览您可以在此处找到的源代码之外，您没有太多选择：https://code.jquery.com/jquery-1.12.4.js。理想情况下，使用未压缩的版本。对于某些方法，要深入了解它可能需要很长时间。 Click 回调的工作方式隐藏得很深。

你可以这样找到它：

在控制台中，输入 $("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 ) {

    // 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 是 'click'，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 是 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 上，回调具有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 );
            ...

那么这个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 ) {
    ...

其中定义了作为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，它可能更简单一些，但同样，如果您想知道确切的信息，除了查看源代码之外您无能为力。