Sự khác nhau giữa jquery với/không có tham số selector và jquery delegate là gì?

Question

Tôi đang sử dụng jquery 1.10. Tôi muốn biết sự khác nhau giữa ba chức năng này là gì.

Chức năng nào tốt hơn và tại sao?

Mục đích của chức năng đại biểu là gì?

$(".dropdown-menu").on("click", ".show_opt_menu", function() { 
    alert("hello"); 
}); 
$(".dropdown-menu .show_opt_menu").on("click", function() { 
    alert("hello"); 
}); 
$(".dropdown-menu").delegate(".show_opt_menu", "click", function() { 
    alert("Delegate"); 
}); 

Ai đó có thể giải thích cho tôi không?

Answer 1

Trước hết, chức năng thứ ba (.delegate) đã được thay thế bằng .on (jQuery 1.7 trở lên) để tôi không sử dụng.

Phương pháp thứ hai sẽ chạy bộ chọn phức tạp ".dropdown-menu .show_opt_menu", tương đối đắt tiền vì lần đầu tiên nhận được tất cả .show_opt_menu giây rồi xem có cha mẹ là .dropdown-menu. Sau đó nó liên kết một sự kiện cho mỗi phần tử. Đây là (tương đối) đắt tiền vì bạn đang chạy một truy vấn chậm, sau đó ràng buộc nhiều sự kiện tiềm ẩn.

Phương pháp đầu tiên là tốt nhất vì nó chỉ liên kết một sự kiện với .dropdown-menu sau đó bất cứ khi nào sự kiện click bong bóng đến nó, nó sẽ kiểm tra sự kiện để xem mục tiêu ban đầu là gì. Đây là một lựa chọn rẻ hơn nhiều, và vì chỉ có một sự kiện bị ràng buộc, nó có nhiều hiệu suất hơn.

---

Tóm tắt: # 1 là tốt nhất, # 2 thường được thực hiện nhưng tệ hơn, # 3 là lỗi thời.

Bạn có thể sẽ không nhận thấy bất kỳ sự khác biệt hiệu suất nào, tuy nhiên, đáng để bạn chú ý vì đó là cách thực hành tốt. Tại một số điểm, bạn có thể cần phải quan tâm đến bản thân với hiệu suất.

Answer 2

Đầu tiên là trình xử lý sự kiện được ủy quyền. Nó lắng nghe các sự kiện sủi bọt lên đến .dropdown-menu trước khi quyết định lọc chuỗi các yếu tố tạo bọt bằng bộ chọn được cung cấp (ví dụ: .show_opt_menu). Sau đó, nó áp dụng chức năng của bạn cho bất kỳ thành phần nào phù hợp gây ra sự kiện. Đây là cách ưa thích (đặc biệt nếu bạn có nội dung động).

Thứ hai là trình xử lý sự kiện chuẩn trên các phần tử riêng lẻ và khiến nhiều trình xử lý sự kiện được kết nối. Các phần tử phải tồn tại tại thời điểm mã này được chạy (trái ngược với khi sự kiện xảy ra).

Cuối cùng cũng giống như lần đầu tiên, nhưng ít có thể đọc được và đã được superceded chính thức bởi on: http://api.jquery.com/delegate/: "Kể từ jQuery 1.7, .delegate() đã được thay thế bằng phương thức .on(). tuy nhiên, nó vẫn là phương tiện hiệu quả nhất để sử dụng ủy quyền sự kiện "

Trong hai tùy chọn đầu tiên, sở thích cá nhân của tôi là luôn sử dụng trình xử lý sự kiện được ủy quyền. Nhưng, như ví dụ này là dành cho sự kiện click, sự khác biệt tốc độ giữa bất kỳ giải pháp nào là không đáng kể (trừ khi bạn có thể bấm 50.000 lần mỗi giây). :)

Answer 3

.delegate()

Đính kèm trình xử lý vào one or more events for all elements that match the selector, hiện tại hoặc trong tương lai, dựa trên một bộ phần tử gốc cụ thể.

.delegate() đã được thay thế bằng phương pháp .Trên()

Answer 4

$(".dropdown-menu").on("click", ".show_opt_menu", function() { 
alert("hello"); 
}); 

chức năng này gắn sự kiện click vào .dropdown menu thực thi khi các yếu tố mục tiêu là .show_opt_menu đó có nghĩa là khi bạn tự động thêm khác .show_opt_menu không cần phải đính kèm chức năng bấm. phụ huynh chịu trách nhiệm về hành động nhấp chuột.

$(".dropdown-menu .show_opt_menu").on("click", function() { 
alert("hello"); 
}); 

chức năng này gắn với sự kiện click vào .show_opt_menu vì vậy khi bạn tự động thêm mới .show_opt_menu bạn cần phải đính kèm sự kiện riêng rẽ đó.

$(".dropdown-menu").delegate(".show_opt_menu", "click", function() { 
alert("Delegate"); 
}); 

cùng mục đích trên