Sự kiện lồng là một kỹ thuật xử lý sự kiện trong JavaScript, cho phép bạn xử lý nhiều sự kiện với ít mã hơn và giúp làm sạch mã nguồn.
Thay vì gắn trực tiếp các trình xử lý sự kiện vào từng phần tử, bạn có thể gắn một trình xử lý sự kiện vào phần tử cha và xử lý các sự kiện con được kích hoạt bên trong nó.
Kỹ thuật này giúp bạn tránh được việc gắn trực tiếp trình xử lý sự kiện vào nhiều phần tử, tạo ra mã nguồn gọn gàng hơn và tránh được sự trùng lặp mã nguồn.
Ví dụ, nếu bạn muốn thêm sự kiện click vào tất cả các nút trong một danh sách, thay vì gắn trực tiếp trình xử lý sự kiện vào từng nút, bạn có thể gắn trình xử lý sự kiện vào phần tử cha của danh sách và xử lý các sự kiện con được kích hoạt từ các nút.
Với kỹ thuật sự kiện lồng, bạn cũng có thể xử lý các sự kiện con được tạo ra động trong quá trình chạy. Ví dụ, nếu bạn muốn xử lý sự kiện click trên các phần tử được tạo ra động trong một danh sách, bạn có thể gắn trình xử lý sự kiện vào phần tử cha của danh sách và xử lý các sự kiện con được kích hoạt từ các phần tử tạo ra động.
Và với sự kiện lồng, bạn có thể làm cho mã nguồn của mình gọn gàng và dễ đọc hơn, tránh được sự trùng lặp mã nguồn và giúp tăng hiệu suất cho trang web của bạn.
Ví dụ về Cleaner Code trong JavaScript
Để minh họa cho việc sử dụng sự kiện lồng trong JavaScript, hãy xem xét ví dụ sau:
Giả sử bạn có một trang web hiển thị danh sách các sản phẩm, mỗi sản phẩm có một nút “Thêm vào giỏ hàng”
Thay vì gắn trực tiếp trình xử lý sự kiện cho từng nút “Thêm vào giỏ hàng”, bạn có thể sử dụng sự kiện lồng để giảm độ phức tạp của mã nguồn.
Đầu tiên, bạn cần gắn một trình xử lý sự kiện click vào phần tử cha chứa tất cả các nút “Thêm vào giỏ hàng”. Đây có thể là phần tử <ul> chứa danh sách sản phẩm.
const productList = document.querySelector('#product-list');
productList.addEventListener('click', addToCart);
Sau đó, bạn cần viết hàm xử lý sự kiện “addToCart”. Trong hàm này, bạn sẽ kiểm tra xem sự kiện được kích hoạt bởi nút “Thêm vào giỏ hàng” hay không. Nếu đúng, bạn sẽ thực hiện các thao tác thêm sản phẩm vào giỏ hàng.
<a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> addToCart(event) {
if (event.target.classList.contains('add-to-cart-btn')) {
// Thêm sản phẩm vào giỏ hàng
}
}
Kết luận và bài viết có liên quan
Bài viết có liên quan: Giới thiệu về lập trình hướng đối tượng (OOP) trong JavaScript: Các khái niệm và ví dụ minh họa ( important ) Giới thiệu về lập trình hướng đối tượng (OOP) trong JavaScript: Các khái niệm và ví dụ minh họa ( important ) Cách tích hợp Google Analytics vào ứng dụng Next.js: Hướng dẫn từ A đến Z dễ dàng cho người mới ( important )
