Có bất kỳ hạn chế nào để nghe các sự kiện ở cấp tài liệu trong jQuery không?

Question

Để nghe các sự kiện trên các yếu tố, tôi nghĩ để lắng nghe trên mức tài liệu:

$(document).on('click', '.myclass', function() {/*do something*/}); 

là tốt hơn so với phong cách để lắng nghe trên mức phần tử:

$('.myclass').on('click', function() { /*do something*/ }); 

Lý do là phong cách đầu tiên có thể áp dụng đối với tự động thêm các phần tử mới. Bạn cũng có thể thấy kiểu này được sử dụng rất nhiều trong Bootstrap: https://github.com/twitter/bootstrap/blob/master/js/bootstrap-alert.js

Tôi muốn sử dụng kiểu đầu tiên rộng rãi. Nhưng tôi tự hỏi nếu có bất kỳ hạn chế nào của phong cách này, hãy nói về hiệu suất?

Answer 1

Từ các tài liệu jQuery sẵn here:

hiệu suất tổ chức sự kiện

Trong hầu hết các trường hợp, một sự kiện như click xảy ra không thường xuyên và hiệu suất không phải là một mối quan tâm đáng kể. Tuy nhiên, các sự kiện tần suất cao như mousemove hoặc scroll có thể kích hoạt hàng chục lần mỗi giây và trong những trường hợp đó, điều quan trọng là phải sử dụng sự kiện một cách thận trọng. Hiệu năng có thể được tăng lên bằng cách giảm số lượng công việc được thực hiện trong trình xử lý, thông tin lưu vào bộ nhớ đệm cần thiết bởi trình xử lý thay vì tính toán lại hoặc bằng cách giới hạn tốc độ số lần cập nhật trang thực tế bằng cách sử dụng setTimeout.

Việc đính kèm nhiều trình xử lý sự kiện được ủy quyền gần đầu cây tài liệu có thể làm giảm hiệu suất. Mỗi lần sự kiện xảy ra, jQuery phải so sánh tất cả các bộ chọn của tất cả các sự kiện được đính kèm của loại đó với mọi phần tử trong đường dẫn từ mục tiêu sự kiện lên đến đỉnh của tài liệu. Để có hiệu suất tốt nhất, hãy đính kèm các sự kiện được ủy quyền tại vị trí tài liệu càng gần các phần tử đích càng tốt. Tránh sử dụng quá mức document hoặc document.body cho các sự kiện được ủy quyền trên tài liệu lớn.

jQuery có thể xử lý các bộ chọn đơn giản của biểu mẫu tag#id.class rất nhanh khi chúng được sử dụng để lọc các sự kiện được ủy quyền. Vì vậy, "#myForm", "a.external" và "button" là tất cả các bộ chọn nhanh. Các sự kiện được ủy quyền sử dụng các bộ chọn phức tạp hơn, đặc biệt là các bộ phân cấp, có thể chậm hơn vài lần - mặc dù chúng vẫn đủ nhanh cho hầu hết các ứng dụng. Bộ chọn phân cấp thường có thể tránh được đơn giản bằng cách gắn trình xử lý vào một điểm thích hợp hơn trong tài liệu. Ví dụ: thay vì $("body").on("click", "#commentForm .addNew", addComment), hãy sử dụng $("#commentForm").on("click", ".addNew", addComment).

Answer 2

Nếu .myclass được thêm tự động trong tài liệu của bạn, đây là những gì bạn thích

$(document).on('click', '.myclass', function() {/*do something*/});

Để làm cho nó hiệu quả hơn, xem xét việc này - (Như bạn muốn sử dụng phong cách đầu tiên rộng rãi)

<div class='parentClass'> 
    <div class='myclass'></div> // <-- added dynamically 
</div> 

Bạn có thể làm điều này -

$('.parentClass').on('click', '.myclass', function() {/*do something*/});

Xem Api Documents - http://api.jquery.com/on/

Answer 3

Một ưu điểm khác của việc gắn trình xử lý nhấp chuột trực tiếp vào chính phần tử đó là Android có vẻ như tốt hơn rất nhiều. Khi chạm vào một phần tử có trình xử lý nhấp chuột, trình duyệt trên thiết bị di động sẽ đưa ra một gợi ý nhỏ rằng một cái gì đó đã được kích hoạt mà nó không hoạt động khi trình xử lý được gắn với phần tử khác.

Dường như nó hoạt động ổn định hơn rất nhiều.