3

在这段代码中：

    function onHover_(){
        $('p').css('background-color', 'red') ;
    }

$( document ).ready(function() {
    //1    
    $('p').click(onHover_);
    //2
    $('p').click(onHover_());
  });

在第一行中，onHover_在我单击一个<p>标签后，该函数被执行（如我所料）。在第二行中onHover_()，文档准备好后立即执行，这意味着它不等待click事件！

简单地说，为什么？

这是一个用于测试代码的jsFiddle 。

在 STO 上找到了这个线程，但结果不是公认的答案所预测的。

4

5 回答 5

7

onHover_ 是一个函数。

onHover_() 执行或调用函数

因此，当您将处理程序分配给事件时，即( click, change)，您希望在事件发生时调用该函数。

但不是在事件被绑定的时候。

所以在这种情况下

$('p').click(onHover_());

的背景颜色p tags会立即更改，而不是在您单击它时发生。发生这种情况是因为()它遵循函数名称（它立即调用函数）。

如果您仍然对语法感到困惑

$('p').click(onHover_);

和

$('p').click( function() {
     $('p').css('background-color', 'red') ;
});

回调是一个匿名函数，在触发或执行特定事件时执行。

于 2013-07-08T21:02:03.577 回答
3

第一个$('p').click(onHover_);是正确的语法，使用函数引用作为回调。第二个是错误的，因为调用函数没有等待处理程序点击被触发并使用返回的结果（如果有的话）作为回调。

于 2013-07-08T21:02:42.863 回答
2

onHover_ 传递对该函数的引用。在您的情况下，这是正确的调用。

onHover_() 调用函数（立即），并将其返回结果作为点击处理程序传递。

在绝大多数情况下，您需要前者。例外情况是，如果onHover_它本身返回一个回调函数的引用，例如

function makeHoverFunc() {
    return function(e) {
         ...
    }
}

$('p').on('click', makeHoverFunc());

后者的（偶尔）优点是您可以将参数传递给makeHoverFunc将在实际回调中使用的调用。

于 2013-07-08T21:02:03.247 回答
2

在 JavaScript 中，函数是可以传递的对象，就像数字4和字符串'foo'一样。

在标记的行中//1，您正在将名为的函数onHover_传递给该click方法。（click 方法稍后会执行该功能，当您单击 a 时<p>）

在标记为 的行中//2，您正在执行名为onHover_（由括号表示()）的函数，并将该执行的结果传递给该click方法。

于 2013-07-08T21:03:31.387 回答
0

基本上，不同之处在于触发功能的时间。

//1    
$('p').click(onHover_);

单击 $('p') 时运行 onHover_ 函数。

//2
$('p').click(onHover_());

立即运行该函数，然后单击 $('p') 尝试执行该函数返回的内容，在您的情况下，它又是 $('p') ，它什么也不做。

于 2013-07-08T21:15:58.427 回答