为什么我不能使用 JQuery 将“函数声明”作为参数传递到事件处理函数中？

Question

为什么使用函数声明不起作用，但使用函数表达式却可以完美工作？ 假设唯一的区别是浏览器如何将它们加载到执行上下文中。

function foo(event){
    console.log('in foo');
}

$('.btn').on('click',foo(event)); 

$.ajax({
    beforeSend:function(){
        $('btn').unbind('click');
    },
    success: function(){
        $('btn').bind('click', foo(event));
    }
});

使用 函数表达式，效果很好：

var foo = function(event){
    console.log('in foo');
}

Answer 1

这里：

$('.btn').on('click',foo(event)); 

您没有传递“函数表达式”。您正在传递“调用”函数“foo”的结果。这就是 JavaScript 语法的工作方式 - 如果您引用一个函数（通过名称或其他方式）并在其后面添加带括号的参数列表（可能为空），那么您正在调用该函数。 这里：

var foo = function(event){
    console.log('in foo');
}

你正在

创建

一个函数，而不是传递它。请注意，在您的“foo”示例中，缺少 function 关键字。

如果您想将函数“foo”作为事件处理程序传递，只需按名称引用它：

$('.btn').on('click', foo);

传递对函数“foo”的引用，

无需调用它。 jQuery API 将获取该函数引用并使用“foo”作为“click”事件的处理程序。

如果您需要在某处传递对函数的引用（例如 jQuery API），并且希望使用一些附加参数来调用该函数，您有两种选择：

在 Function 原型上使用

.bind()

方法，或者

1. 自己将函数包装在 

   另一个
函数中。
2. 对于 jQuery 事件处理程序，第三种选择是提供一个对象作为
.on()

的参数。该对象将附加到事件实际发生时传递的

event

 参数：

function foo(event) {
  var data = event.data;
  if (data.whatever) { // ...

然后，当您致电

.on()

时：

$('.btn').on('click', { whatever: true }, foo);