Почему неанонимные функции выполняются при использовании обработчика события click?

Question

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

Но окно с предупреждением появляется сразу после загрузки страницы! Что я делаю неправильно? (закомментированная часть делает то же самое).

Если я определю функцию bclick () как

function bclick(foo, bar){ ... }

Результат также тот же.

JS в шапке:

<script type="text/javascript">

var bclick = function(foo, bar){alert( foo + "  " + bar + "\n");}

//$(document).ready(function(){
//    $("button").click(bclick("Button","Clicked"));
//    });

$("button").click(bclick("Button","Clicked"));

</script>

Соответствующий HTML в теле:

<button>Click Me!</button> 

Answer 1

Вы оцениваете свою функцию еще до того, как ее пройдете.

$("button").click(bclick("Button","Clicked"));

Здесь bclick вызывается с этими аргументами, а результат передается методу click. Вы хотите передать его как обычную переменную, например:

$("button").click(bclick);

Однако очевидная проблема заключается в том, что вы не можете передавать пользовательские аргументы.

Вы также можете передать анонимную функцию, которая вызывает вашу функцию:

$("button").click(function() { bclick("Button", "Clicked"); });

Answer 2

Если вы хотите передать аргументы при настройке вашего обработчика событий, другой альтернативой является возврат функции.

$("button").click(bclick("Button","Clicked"));

function bclick(foo, bar) { // called once when the event handler is setup
    return function(e) { // called every time the event is triggered
        // you still have the original `foo` and `bar` in scope,
        // and a new `e` (event object) every time the button is clicked
        console.log(foo, bar, e);
    };
}

Answer 3

Как сказал musicfreak. Однако, если вы хотите быть хитрым и использовать свой код, вам просто нужно добавить return this в конце функции bclick.