logo标签列表

JQuery的数据从哪里来？

javascriptjqueryfunctionparameters
3

我看到许多JQuery函数使用参数函数。即使我使用它们，如果不知道其背后的工作原理，就会感觉不完整。我们以click方法为例：

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

在这段代码中，如果我在方法内部使用"this"，它会返回"p"元素本身。然而，我无法弄清楚"event"参数被分配了什么值。难道不应该有一个类似以下代码片段的地方吗？
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 );
};

我看不到任何地方将某个参数命名为“event”进行填充或赋值。

我在使用 $.ajax 请求时也遇到了同样的问题，

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

可以看到有某个地方在 "data" 参数中加载了 "data"，那么实际数据是如何填充的？我们什么时候加载实际数据？我见过一些类似的问题。

1
请查看以下内容：如何用简单的英语解释回调函数？它们与从一个函数调用另一个函数有什么不同？（最高票答案）和javascript - 如何从异步调用中返回响应？ - Andreas
可能是重复的问题：如何用简单的语言解释回调函数？它们与从另一个函数调用一个函数有什么不同？ - user6655984
3个回答
1
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 ) {

    // 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是您的函数(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 ) {

            // 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来说，可能会更加简单一些，但是如果你想要确切的了解，除了查看源代码外，没有其他办法。

1
声明发生在函数参数本身。
在函数参数中声明data、event或你想要称呼它的任何东西（任何单词都可以），实际上就是var data = ...语句。
在事件处理程序的情况下，event被浏览器传递给任何附加到该事件的函数。在ajax调用的情况下，正如@Alec所说，那是从服务器返回的数据。
0
关于您的第一个问题，关于event参数，event是您的点击事件。它永远不会像普通变量一样被明确声明。它只是一个参数，在您的示例中，点击是事件。
关于您的ajax问题，data参数是在成功发布后从后端返回的内容。例如，我使用ajax调用从前端发送一些信息。然后我的后端使用该信息将数据发送回前端，如JSON，JSON将成为data参数。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接