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

Điều gì 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 trình xử lý cuối cùng "thắng", hoặc cả hai trình xử lý sẽ được chạy?

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

Các trình xử lý sẽ thực hiện theo thứ tự mà chúng bị ràng buộc .

Giả sử rằng bạn có hai trình xử lý, f và g và muốn đảm bảo rằng chúng được thực thi theo thứ tự đã biết và cố định, sau đó chỉ gói gọn chúng:

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

Theo cách này, chỉ có (từ phối cảnh của jQuery) chỉ có một trình xử lý, gọi f và g theo thứ tự được chỉ định.

.Bind () của jQuery kích hoạt theo thứ tự nó bị ràng buộc :

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

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

Vì các hàm khác của jQuery (ví dụ .click()) là các phím tắt cho .bind('click', handler), tôi đoán rằng chúng cũng được kích hoạt theo thứ tự chúng bị ràng buộc.

Bạn sẽ có thể sử dụng chuỗi để thực hiện các sự kiện theo trình 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 đoạn mã dưới đây đang làm như vậy

$('#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 nói:

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

Cả hai xử lý được gọi.

Bạn có thể nghĩ về ràng buộc sự kiện nội tuyến (ví dụ "onclick=..."), trong đó một nhược điểm lớn chỉ có một trình xử lý có thể được đặt cho một sự kiện.

jQuery phù hợp với mô hình đăng ký sự kiện DOM Cấp 2 :

Mô hình sự kiện DOM cho phép đăng ký nhiều người nghe sự kiện trên một EventTarget. Để đạt được điều này, trình lắng nghe sự kiện không còn được lưu trữ dưới dạng giá trị thuộc tính

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 của Stephan202 và nhiều trình lắng nghe sự kiện. Tôi có 3 tab tìm kiếm, hãy xác định id văn bản đầu vào của chúng trong một mảng:

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

Khi nội dung của searchtab1 thay đổi, tôi muốn cập nhật searchtab2 và searchtab3. Đã làm theo cách này để đó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 lập trình viên đã chọn đóng gói, tuy nhiên nhiều trình lắng nghe sự kiện cũng hoạt động. Chúng tôi đã sử dụng Chrome để kiểm tra nó.

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

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

jquery sẽ thực thi cả hai trình xử lý vì nó cho phép nhiều trình xử lý sự kiện. Tôi đã tạo mã mẫu. Bạn có thể thử nó

bản giới thiệu