Sử dụng .delegate() có hiệu quả hơn không?

Question

Một trong những nhà phát triển làm việc với tôi bắt đầu viết tất cả các mã của mình theo cách này:

$('.toggles').delegate('input', 'click', function() { 
    // do something 
}); 

vs:

$('.toggles').click(function() { 
    // do something 
}); 

Có bất kỳ lợi ích hiệu suất để làm điều này?

Answer 1

delegate() được thay thế bằng jQuery 1.7.

Thay vào đó hãy sử dụng .on().

---

.on() có điểm chuẩn hiệu suất tuyệt vời. Và bao gồm .click() nhu cầu của bạn cũng như cần

Answer 2

Vâng, và trong thực tế, có một cách tốt hơn để làm điều đó, với .Trên(): hãy nhìn vào this

Answer 3

Tôi khá chắc chắn rằng nếu tất cả các mục của lớp "toggles" có mặt khi ràng buộc đó được thực hiện, đại biểu đó() sẽ kém hiệu quả hơn. Nó liên kết với tất cả mọi thứ của lớp "toggles", và sau đó, khi một trong những yếu tố đó được nhấp, hãy kiểm tra xem liệu đối tượng DOM thực tế được nhấp vào có phải là một đầu vào hay không.

click(), mặt khác, là lối tắt cho bind(), liên kết trực tiếp với mọi thứ trong lớp "chuyển đổi" và luôn kích hoạt khi mục DOM được nhấp.

Lý do duy nhất để sử dụng delegate() sẽ là nếu đầu vào được thêm vào bên trong các mục của lớp "chuyển đổi" sau khi thực hiện ràng buộc.

Điều này cũng áp dụng cho việc sử dụng các quá tải khác nhau của on(), thay thế delegate() và bind() (và bằng cách thay thế bind, cũng thay thế click()).

Answer 4

Như người Pháp đã nêu trong phiên bản mới nhất của jQuery, cả hai chức năng đều kết thúc ánh xạ tới jQuery.on.

Trong đoạn mã jQuery, bạn có thể thấy đại biểu đó thực sự chỉ là một wrapper cho on:

delegate: function(selector, types, data, fn) { 
    return this.on(types, selector, data, fn); 
}, 

Sau đó, khi jQuery liên kết click (cũng như các sự kiện khác) nó gọi vào on cũng như:

jQuery.each(("... click ... ").split(" "), function(i, name) { 

// Handle event binding 
jQuery.fn[ name ] = function(data, fn) { 
    if (fn == null) { 
     fn = data; 
     data = null; 
    } 

    return arguments.length > 0 ? 
     this.on(name, null, data, fn) : 
     this.trigger(name); 
}; 
... 
}); 

Answer 5

Như đề xuất bạn có thể sử dụng .on(). Theo như câu hỏi của bạn là có liên quan, .on() và cũng .delegate() cho vấn đề đó có hiệu suất tốt hơn so với các sự kiện ràng buộc cho mục tiêu trực tiếp. Đó là bởi vì các chất kết dính này lắng nghe một phần tử cao hơn trong cây DOM và sau đó kiểm tra mục tiêu, vì nhóm các mục tiêu của bạn tăng .on() và .delegate() chắc chắn sẽ mang lại cho bạn lợi ích hiệu suất.

Và nói chung, chúng sẽ luôn hiệu quả hơn.

Answer 6

Vâng. Sử dụng .delegate sẽ giảm số lượng trình xử lý sự kiện.

Giả sử bạn có một bảng trong trang của mình và bạn muốn đính kèm trình xử lý nhấp chuột vào mỗi <td>. Thay vì gắn xử lý sự kiện cho cá nhân <td> s gắn nó vào bảng:

$("#myTable").delegate("click", "td", function() { 
    //do some thing on click of td 
}); 

Khi bạn click vào <td> sự kiện này sẽ bong bóng lên đến bàn. Ở đây bằng cách sử dụng delegate, chúng ta có thể giảm số lượng các trình xử lý sự kiện, giúp cải thiện hiệu năng.

đại biểu không còn được dùng trong phiên bản mới nhất của việc sử dụng jQuery .on thay vào đó nó hoạt động như đại biểu.

Answer 7

Có một bổ sung mà bạn cần phải nhận thức liên quan đến việc sử dụng trên (đại biểu trong phiên bản cũ) vs nhấp chuột:

nếu bạn làm điều này:

$("a").click(function() { 
    alert("Click on link detected"); 
    $(this).after("<a href='#'>New link</a>"); 
}); 

liên kết mới của bạn sẽ không được gắn với trình xử lý nhấp chuột "a" mặc dù nó phải vì nó là một liên kết.

tuy nhiên nếu bạn sử dụng trên:

$("a").on("click", function(event){ 
    $(this).after("<a href='#'>Nouveau lien</a>"); 
}); 

với điều này liên kết mới phản ứng với sự kiện nhấn với bộ xử lý nhấp chuột.