Làm cách nào để chuyển các đối số cho các trình xử lý sự kiện trong jQuery?

Với mã jQuery như:

$("#myid").click(myfunction);

function myfunction(arg1, arg2) {/* something */}

Làm cách nào để chuyển các đối số tới myfunctionkhi sử dụng jQuery?

Cách đơn giản nhất là làm như vậy (giả sử bạn không muốn bất kỳ thông tin sự kiện nào được truyền vào hàm) ...

$("#myid").click(function() {
    myfunction(arg1, arg2);
});

jsFiddle .

Điều này tạo ra một hàm ẩn danh, được gọi khi clicksự kiện được kích hoạt. Điều này sẽ lần lượt gọi myfunction()với các đối số bạn cung cấp.

Nếu bạn muốn giữ nguyên ThisBinding(giá trị của thisthời điểm hàm được gọi, đặt thành phần tử đã kích hoạt sự kiện), thì hãy gọi hàm với call().

$("#myid").click(function() {
    myfunction.call(this, arg1, arg2);
});

jsFiddle .

Bạn không thể chuyển trực tiếp tham chiếu theo cách ví dụ của bạn trạng thái hoặc đối số duy nhất của nó sẽ là đối tượng jQueryevent .

Nếu bạn làm muốn vượt qua các tài liệu tham khảo, bạn phải tận dụng jQuery proxy()chức năng (mà là một trình duyệt wrapper chéo cho Function.prototype.bind()). Điều này cho phép bạn vượt qua đối số, mà đang bị ràng buộc trước khi các eventcuộc tranh cãi.

$("#myid").click($.proxy(myfunction, null, arg1, arg2));   

jsFiddle .

Trong ví dụ này, myfunction()sẽ được thực hiện với nó ThisBindingcòn nguyên vẹn ( nullkhông phải là một đối tượng, do đó bình thường thisgiá trị của phần tử đã kích hoạt sự kiện này được sử dụng), cùng với các đối số (theo thứ tự) arg1, arg2và cuối cùng là jQuery eventđối tượng mà bạn có thể bỏ qua nếu nó không bắt buộc (thậm chí không đặt tên nó trong các đối số của hàm).

Bạn cũng có thể sử dụng sử dụng eventđối tượng jQuery datađể truyền dữ liệu, nhưng điều này sẽ yêu cầu sửa đổi myfunction()để truy cập nó thông qua event.data.arg1(không phải là đối số hàm như câu hỏi của bạn đề cập) hoặc ít nhất là giới thiệu một hàm proxy thủ công như ví dụ trước đây hoặc một hàm được tạo bằng cách sử dụng ví dụ sau.

$("#myid").on('click', {arg1: 'hello', arg2: 'bye'}, myfunction);

function myfunction(e) {

    var arg1 = e.data.arg1;
    var arg2 = e.data.arg2;

    alert(arg1);
    alert(arg2);

}

//call method directly:
myfunction({
    arg1: 'hello agian', 
    arg2: 'bye again'
});

Cũng cho phép bạn liên kết và hủy liên kết các trình xử lý sự kiện cụ thể bằng cách sử dụng các phương pháp bật và tắt.

Thí dụ:

$("#myid").off('click', myfunction);

Thao tác này sẽ hủy liên kết trình xử lý chức năng khỏi #myid

trong khi bạn chắc chắn nên sử dụng câu trả lời của Alex, phương thức "ràng buộc" của thư viện nguyên mẫu đã được chuẩn hóa trong Ecmascript 5 và sẽ sớm được triển khai trên các trình duyệt nguyên bản. Nó hoạt động như thế này:

jQuery("#myid").click(myfunction.bind(this, arg1, arg2));

Chủ đề cũ, nhưng dành cho mục đích tìm kiếm; thử:

$(selector).on('mouseover',...);

... và xem thông số "data": http://api.jquery.com/on/

ví dụ:

function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {name: "Karl"}, greet );
$( "button" ).on( "click", {name: "Addy"}, greet );

Đã có những câu trả lời tuyệt vời rồi, nhưng dù sao, đây là hai xu của tôi. Bạn cũng có thể dùng:

$("#myid").click({arg1: "foo", arg2: "bar"}, myfunction)

Và người nghe sẽ trông giống như:

function myfunction(event){ alert(event.data.arg1); alert(event.data.arg2); }

Đơn giản:

$(element).on("click", ["Jesikka"],  myHandler);

function myHandler(event){
   alert(event.data);     //passed in "event.data"
}