jQuery: nhiều hơn một trình xử lý cho cùng một sự kiện

Question

Điều gì sẽ xảy ra nếu tôi liên kết hai trình xử lý sự kiện với cùng một sự kiện cho cùng một phần tử?

Ví dụ:

var elem = $("...") 
elem.click(...); 
elem.click(...); 

Liệu xử lý cuối cùng "giành chiến thắng", hoặc cả hai bộ xử lý sẽ được chạy?

Answer 1

Cả hai bộ xử lý sẽ chạy, mô hình sự kiện jQuery cho phép xử lý nhiều vào một yếu tố, do đó một handler sau không ghi đè lên một trình xử lý cũ.

The handlers will execute in the order in which they were bound.

Answer 2

Cả hai trình xử lý đều được gọi.

Bạn có thể đang nghĩ đến inline event binding (ví dụ: "onclick=..."), trong đó hạn chế lớn nhất là chỉ một trình xử lý có thể được đặt cho một sự kiện.

jQuery phù hợp với DOM Level 2 event registration model:

DOM Event mẫu cho phép đăng ký của nhiều sự kiện thính giả trên EventTarget duy nhất. Để đạt được điều này, người nghe sự kiện sẽ không còn lưu trữ như thuộc tính giá trị

Answer 3

Giả sử rằng bạn có hai bộ xử lý, f và g, và muốn chắc chắn rằng họ đang thực hiện theo một thứ tự đã biết và cố định, sau đó chỉ cần đóng gói chúng:

$("...").click(function(event){ 
    f(event); 
    g(event); 
}); 

Bằng cách này có (từ quan điểm của jQuery) chỉ một bộ xử lý, gọi f và g theo thứ tự được chỉ định.

Answer 4

Bạn sẽ có thể sử dụng chaining được kết để thực hiện các sự kiện theo thứ tự, ví dụ:

$('#target') 
    .bind('click',function(event) { 
    alert('Hello!'); 
    }) 
    .bind('click',function(event) { 
    alert('Hello again!'); 
    }) 
    .bind('click',function(event) { 
    alert('Hello yet again!'); 
    }); 

Tôi đoán mã dưới đây đang làm cùng

$('#target') 
     .click(function(event) { 
     alert('Hello!'); 
     }) 
     .click(function(event) { 
     alert('Hello again!'); 
     }) 
     .click(function(event) { 
     alert('Hello yet again!'); 
     }); 

Nguồn: http://www.peachpit.com/articles/article.aspx?p=1371947&seqNum=3

TFM cũng cho biết:

Khi một sự kiện đến một phần tử, tất cả các trình xử lý được liên kết với sự kiện đó loại cho phần tử được kích hoạt. Nếu có nhiều người xử lý đã đăng ký, họ sẽ luôn thực hiện theo thứ tự mà họ bị ràng buộc . Sau khi tất cả các trình xử lý đã được thực thi, sự kiện tiếp tục theo đường dẫn truyền sự kiện bình thường .

Answer 5

Có một giải pháp thay thế để đảm bảo rằng một trình xử lý xảy ra sau một trình xử lý khác: đính kèm trình xử lý thứ hai vào phần tử có chứa và để sự kiện phát tán. Trong trình xử lý được đính kèm với vùng chứa, bạn có thể xem event.target và làm điều gì đó nếu đó là thứ bạn quan tâm.

Thô, có thể, nhưng nó chắc chắn sẽ hoạt động.

Answer 6

Làm cho nó hoạt động thành công bằng cách sử dụng 2 phương pháp: đóng gói Stephan202 và nhiều trình xử lý sự kiện. Tôi có 3 tab tìm kiếm, chúng ta hãy xác định văn bản đầu vào id của họ trong một mảng:

var ids = new Array("searchtab1", "searchtab2", "searchtab3"); 

Khi hàm lượng thay đổi searchtab1, tôi muốn cập nhật searchtab2 và searchtab3. Đã làm nó theo cách này cho đóng gói:

for (var i in ids) { 
    $("#" + ids[i]).change(function() { 
     for (var j in ids) { 
      if (this != ids[j]) { 
       $("#" + ids[j]).val($(this).val()); 
      } 
     } 
    }); 
} 

Nhiều người nghe sự kiện:

for (var i in ids) { 
    for (var j in ids) { 
     if (ids[i] != ids[j]) { 
      $("#" + ids[i]).change(function() { 
       $("#" + ids[j]).val($(this).val()); 
      }); 
     } 
    } 
} 

Tôi thích cả hai phương pháp, nhưng các lập trình viên chọn đóng gói, tuy nhiên nhiều người nghe sự kiện cũng làm việc. Chúng tôi đã sử dụng Chrome để kiểm tra.

Answer 7

.bind jQuery() cháy theo thứ tự nó được ràng buộc:

Khi một sự kiện đạt một yếu tố, tất cả các bộ xử lý ràng buộc với loại sự kiện cho nguyên tố này được sa thải. Nếu có nhiều người xử lý đã đăng ký, họ sẽ luôn thực hiện theo thứ tự mà họ bị ràng buộc . Sau khi tất cả các trình xử lý đã được thực thi, sự kiện tiếp tục theo đường dẫn truyền sự kiện bình thường .

Nguồn: http://api.jquery.com/bind/

Bởi vì jQuery chức năng khác (. Ex .click()) là phím tắt cho .bind('click', handler), tôi sẽ đoán rằng họ cũng được kích hoạt theo thứ tự chúng đang bị ràng buộc.