Dlaczego funkcje nieanonimowe są wykonywane podczas korzystania z obsługi zdarzeń kliknięcia?

Question

Badałem wykorzystanie niestandardowych funkcji do obsługi zdarzeń. W tym uproszczonym przykładzie próbuję wyświetlić alert, który pojawia się, gdy użytkownik kliknie przycisk.

Ale okno alertu wyświetla się natychmiast po załadowaniu strony! Co ja robię źle? (skomentowana część robi dokładnie to samo).

Jeśli określenie funkcji BKliknij() jak

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

Wynik jest taki sam.

JS w nagłówku:

<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> 

Stosowna HTML w organizmie:

<button>Click Me!</button> 

Answer 1

Ty oceniając swoją funkcję, zanim jeszcze go przekazywać.

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

Tutaj bclick nazywa się z tymi argumentami, a wynik jest przekazywane do metody click. Chcesz przekazać go jak normalny zmiennej, tak:

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

Oczywisty problem z tym, chociaż, jest fakt, że nie można przekazać w niestandardowych argumentów.

Można także przekazać w anonimowej funkcji, która nazywa swoją funkcję:

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

Answer 2

Jak musicfreak powiedział. Jeśli jednak chcesz być naprawdę podchwytliwy i użyć swojego kodu, wystarczy dodać na końcu swojej funkcji bclick return this.

Answer 3

Jeśli chcesz przekazać argumenty podczas konfigurowania procedury obsługi zdarzenia, inną opcją jest zwrócenie funkcji.

$("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); 
    }; 
}