Tìm hiểu điều gì, tại sao và cách sử dụng phương pháp Ủy quyền sự kiện trong JavaScript.
Ủy quyền sự kiện JavaScript là gì và khi nào thì bạn nên sử dụng nó?
Nói tóm lại, ủy quyền sự kiện là một phương pháp JavaScript cho phép bạn tương tác với các phần tử con bằng cách chỉ sử dụng một đơn vị trình nghe sự kiện, trên phần tử mẹ. Với ủy quyền sự kiện, bạn có thể tránh phải thêm trình xử lý sự kiện vào mọi phần tử con, nhưng bạn vẫn có thể tìm và thao tác chúng.
Bạn sẽ thấy lý do tại sao điều này lại có sức mạnh trong giây lát.
Giả sử bạn có một danh sách các mục bên trong một danh sách. Khi người dùng nhấp vào một trong hai mục danh sách, bạn muốn điều gì đó xảy ra.
Hãy xem hai cách khác nhau để làm điều đó.
Đính kèm trình xử lý sự kiện vào từng phần tử
Một cách phổ biến để đạt được quyền truy cập vào các mục phần tử riêng lẻ trong danh sách là lặp lại chúng, ví dụ:với for vòng. Và sau đó đính kèm trình nghe sự kiện vào từng phần tử:
let allExerciseItems = document.querySelectorAll(".exercise-item")
for (let exerciseItem of allExerciseItems) {
exerciseItem.addEventListener("click", function(event) {
// Do something with target child element
event.target.classList.toggle("exercise-complete")
});
}Ví dụ
https://codepen.io/StrengthandFreedom/pen/KBZezV/
Truy cập các mục với Ủy quyền sự kiện
Ủy quyền sự kiện hoàn toàn khác với ví dụ vòng lặp for mà bạn đã thấy ở trên. Thay vì lặp (lặp) qua từng phần tử mà chúng tôi muốn truy cập, chúng tôi chỉ cần nhắm mục tiêu đến phần tử mẹ, như sau:
// Get parent element, add a click event listener
document.querySelector(".exercise-list").addEventListener("click", function(event) {
if(event.target.classList.contains('exercise-item')) {
// Do something with target child element
event.target.classList.toggle('exercise-complete')
}
})
Ví dụ về CodePen. Lưu ý:thay vì classList.contains bạn có thể sử dụng phần tử element.matches API matches() nếu bạn cần thêm tính linh hoạt của bộ chọn.
Như bạn có thể thấy, kết quả là hoàn toàn giống nhau. Khi bạn nhấp vào một trong hai mục phần tử bài tập trên mục này, chúng sẽ chuyển đổi exercise-complete lớp. Điều khác biệt là phương pháp chúng tôi đã sử dụng để đạt được kết quả này.
Vậy tại sao bạn nên sử dụng phương thức ủy quyền sự kiện thay vì phương thức xử lý sự kiện + phương thức vòng lặp for?
Hãy thảo luận về điều đó tiếp theo!
Ủy quyền sự kiện và hiệu suất
Hãy tưởng tượng rằng bạn đang xử lý một ứng dụng web trong đó bạn có hàng trăm hoặc hàng nghìn phần tử được tạo động mỗi ngày, giờ hoặc thậm chí mỗi phút. Ví dụ có thể là Lịch đặt phòng để đặt phòng khách sạn. Hoặc nền tảng truyền thông xã hội nhưTwitter yêu cầu cập nhật trực tiếp thường xuyên để mang lại trải nghiệm người dùng tối ưu.
Nếu mọi phần tử trong giao diện người dùng web của bạn có các trình xử lý sự kiện gắn liền với chúng, thì loại kịch bản này có thể nhanh chóng trở nên chuyên sâu về phần cứng.
Tất cả những người nghe sự kiện đó có thể làm tăng CPU của người dùng của bạn. Chúng có thể gây ra một lượng lớn các tham chiếu chức năng nằm trong bộ nhớ. Điều này có thể gây rò rỉ bộ nhớ và làm giảm hiệu suất nói chung.
Tôi không biết nhiều về GC (Thu gom rác). Tôi đã hiểu ít nhiều về việc chỉ viết JavaScript (một ngôn ngữ lập trình cấp cao). Nhưng có một điều mà tôi biết, đó là GC trong trình duyệt có thể không thể đoán trước được do có nhiều trình duyệt của nhà cung cấp khác nhau (Chrome, FireFox, v.v.). Và tất nhiên, vô số thiết bị (điện thoại thông minh, máy tính xách tay, v.v.).
Thu gom rác
Tóm lại, Garbage Collection là một kiểu quản lý bộ nhớ máy tính. Trình thu gom rác cố gắng xóa mã cũ / không sử dụng nằm ở đó và tăng bộ nhớ máy tính của bạn. Có vô số trình thu gom rác khác nhau cho các ngôn ngữ và hệ thống lập trình khác nhau.
Việc gắn các trình xử lý sự kiện vào mọi thứ, như bạn đã thấy trong ví dụ về vòng lặp, sẽ tăng số lượng thu thập rác mà ứng dụng web của bạn cần. Điều này hầu như luôn làm giảm hiệu suất.
Nó thường hoạt động hiệu quả hơn khi bạn có một đĩa đơn trình xử lý sự kiện trên một phần tử mẹ sẽ lắng nghe tất cả các lần nhấp vào các phần tử con của nó hơn là để gắn các trình xử lý sự kiện vào mọi phần tử con.