Почему метод обернут анонимной функцией?

Question

[Dima4jin]

Привет!
Типичный jquery код выглядит так:

$('div').mouseenter(function(){
        $('div').fadeTo('fast', 1);
});

Как я понял, за селектором следует метод mouseenter( ), в круглые скобки которого задаются параметры, ими могут быть как любые значения, так и методы, в данном случае это метод fadeTo().

Зачем метод обернут анонимной функцией?
Почему невозможно что-то подобное?

$('div').mouseenter(
        $('div').fadeTo('fast', 1);
 );

Заранее извиняюсь за, возможно, глупый вопрос.

Answer 1

[Александр Батухтин]

var fade = $('div').fadeTo('fast', 1);
var fade = function(){
    $('div').fadeTo('fast', 1);
}

Чуешь разницу?
В первом случае в fade запишется результат выполнения $('div').fadeTo('fast', 1);
Во-втором — функция, которая будет это дело выполнять при каждом вызове fade().
То есть если не оборачивать в анонимную функцию, fadeTo сработает при навешивании события, а не когда оно выстрелит.

Comments

[Dima4jin]

Каждый раз, когда я совершаю mouseenter, метод идет в скобки и смотрит что у него там лежит, если лежит функция, то он её воспроизводит, а если набор переменных, то он, в лучшем случае, их посчитает. Я правильно вас понял?

[Dima4jin]

если $('div').fadeTo('fast', 1); не обернуть функцией, то это выражение сработает сразу-же как только интерпретатор его увидит?

[Александр Батухтин]

В скобки он не идёт, он идёт в переменную, в которую сохранил то, что было в скобках при интерпретации страницы, но если не придираться, то, в общем, да.
Верно, сработает сразу же. Это не валидный синтаксис для mouseenter и других обработчиков, они ожидают функцию.
Вот если бы $('div').fadeTo('fast', 1); возвращало функцию, тогда бы всё работало.

[Dima4jin]

Благодарю

Answer 2

[fart]

В функцию mouseenter передается параметр, mouseenter ожидает что её при вызове передадут callback функцию, в частности Вы передаете анонимную функцию.
function(){
...}
Вы по-сути задаете обработчик события.

это тоже самое(ну почти), что

var fn = function(){
        $('div').fadeTo('fast', 1);
        //ИМХО лучше так, $(this).fadeTo('fast', 1);
}

$('div').mouseenter(fn);