为什么我不能在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),并且你希望用一些额外的参数调用这个函数,你有两个选择:

1. 使用.bind()Function原型上的方法,或
2. 自己将功能包装在另一个功能中.

在jQuery事件处理程序的情况下,第三种选择是提供一个对象作为参数.on().该对象将附加到event事件实际发生时传递的参数:

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

然后,当你打电话.on():

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