Tại sao các hàm không ẩn danh được thực thi khi sử dụng trình xử lý sự kiện nhấp chuột?

Question

Tôi đã khám phá việc sử dụng các hàm tùy chỉnh cho trình xử lý sự kiện. Trong ví dụ này, tôi đang cố gắng để có được một cảnh báo để bật lên khi người dùng nhấp vào một nút.

Nhưng hộp cảnh báo bật lên ngay lập tức khi trang tải! Tôi đang làm gì sai? (phần nhận xét thực hiện chính xác điều tương tự).

Nếu tôi xác định bclick() chức năng như

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

Kết quả cũng là như nhau.

JS trong tiêu đề:

<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 có liên quan trong cơ thể:

<button>Click Me!</button> 

Answer 1

Bạn đang đánh giá chức năng của bạn trước khi bạn thậm chí vượt qua nó.

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

Ở đây, bclick được gọi với những lập luận, và kết quả đang được truyền cho phương thức click. Bạn muốn chuyển nó như một biến bình thường, như sau:

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

Vấn đề rõ ràng với điều này, là bạn không thể chuyển đối số tùy chỉnh.

Bạn cũng có thể vượt qua trong một chức năng ẩn danh mà các cuộc gọi chức năng của bạn:

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

Answer 2

Như musicfreak nói. Tuy nhiên nếu bạn muốn thực sự phức tạp và sử dụng mã bạn có, thì bạn chỉ cần thêm return this vào cuối hàm bclick của bạn.

Answer 3

Nếu bạn muốn chuyển đối số khi thiết lập trình xử lý sự kiện, một lựa chọn khác là trả về một hàm.

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