Почему я не могу передать "объявление функции" в качестве аргумента в функцию-обработчик событий с 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", не вызывая ее. API jQuery получит ссылку на эту функцию и будет использовать "foo" в качестве обработчика событий "щелчка".

Если вам нужно передать ссылку на функцию где-нибудь (например, на jQuery API), и вы хотите, чтобы функция вызывалась с некоторыми дополнительными параметрами, у вас есть два варианта:

1. Использовать .bind() метод на прототипе функции, или
2. Оберните функцию в другую функцию самостоятельно.

В случае обработчика событий jQuery, третий вариант - предоставить объект в качестве аргумента .on(), Этот объект будет прикреплен к event параметр передается, когда событие действительно происходит:

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

Затем, когда вы звоните .on():

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