Native addEventListener với bộ chọn như .on() trong jQuery

Question

Có ai biết phương thức .on() của jQuery có thể được triển khai trong JS gốc không? Phương thức "addEventListener" không lấy một phần tử con/selector như là một cách để lọc, và tôi không nghĩ rằng tôi có kiến ​​thức tạo bọt/nắm bắt thích hợp để hiểu hoàn toàn những gì đang xảy ra trong đó. Tôi đã tham khảo ý kiến ​​nguồn trong event.js, nơi nó xuất hiện mà cuối cùng addEventListener không được sử dụng giống như bình thường, nhưng tôi không chắc tôi khá grok nguồn.

Nếu phương pháp gốc không cung cấp một cơ chế để tận dụng lợi thế của bong bóng và chụp, thì hàm jQuery .on() thực sự thậm chí có bất kỳ lợi ích nào, hay nó chỉ làm cho nó trông như vậy? Tôi đã theo ấn tượng rằng

.on('parent', '.child', fn(){}); 

là hiệu quả hơn gắn một sự kiện để tất cả trẻ em riêng biệt, nhưng từ giải thích của tôi về nguồn, thật khó để biết jQuery là bằng cách nào đó quản lý này trong một cách để dẫn đến hiệu suất cải thiện, hoặc nếu nó chỉ là để dễ đọc.

Có phương pháp chuẩn để triển khai sự kiện trên cha mẹ tận dụng các giai đoạn tạo bọt/chụp cho các phần tử con của nó, thay vì phải đính kèm sự kiện cho từng cá nhân không?

Answer 1

Thực hiện đoàn kiện tự nhiên:

parent.addEventListener('click', function(e) { 
    if(e.target.classList.contains('myclass')) { 
     // this code will be executed only when elements with class 
     // 'myclass' are clicked on 
    } 
}); 

Hiệu quả bạn đang đề cập đến đã làm với bao nhiêu xử lý sự kiện bạn thêm. Hãy tưởng tượng một bảng có 100 hàng. Sẽ hiệu quả hơn khi đính kèm một trình xử lý sự kiện đơn lẻ vào phần tử bảng sau đó "ủy nhiệm" cho mỗi hàng hơn là đính kèm 100 trình xử lý sự kiện, 1 cho mỗi hàng.

Lý do sự kiện ủy nhiệm hoạt động là do sự kiện nhấp thực sự kích hoạt trên cả con và cha mẹ (vì bạn đang nhấp vào một vùng trong phụ huynh). Đoạn mã trên bắn vào sự kiện nhấp chuột của phụ huynh, nhưng chỉ thực hiện khi điều kiện trả về true cho sự kiện đích, do đó mô phỏng trình xử lý sự kiện được đính kèm trực tiếp.

Việc bong bóng/chụp là một vấn đề có liên quan, nhưng bạn chỉ cần lo lắng về vấn đề này nếu thứ tự của nhiều trình xử lý sự kiện kích hoạt các vấn đề. Tôi khuyên bạn nên đọc thêm trên event order nếu bạn quan tâm đến sự hiểu biết về bong bóng và ghi lại.

Lợi ích chung nhất của việc ủy ​​quyền sự kiện là nó xử lý các phần tử mới được thêm vào DOM sau khi trình xử lý sự kiện được đính kèm. Lấy ví dụ trên của một bảng gồm 100 hàng với các trình xử lý nhấp chuột. Nếu chúng ta sử dụng tập tin đính kèm sự kiện trực tiếp (100 trình xử lý sự kiện), thì các hàng mới được thêm vào sẽ cần trình xử lý sự kiện được thêm thủ công. Nếu chúng ta sử dụng các sự kiện được ủy quyền, thì các hàng mới sẽ tự động 'có' trình xử lý sự kiện, bởi vì nó được thêm về mặt kỹ thuật cho phụ huynh sẽ nhận tất cả các sự kiện trong tương lai. Đọc What is DOM Event Delegation, như Felix Kling đã đề xuất, để biết thêm thông tin.