💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!

Cập nhật: 2025年3月1日

Event Delegation

📌

Kết luận

Event Delegation giúp quản lý sự kiện cho cả các phần tử sinh ra sau này

📝 Mã thực tế tại đây

document.getElementById('list').addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    e.target.remove();
  }
});

Thay vì gán sự kiện cho từng mục con, ta gán 1 lần duy nhất cho cha. Khi có mục con mới được thêm vào, nó vẫn sẽ tự động có hiệu ứng này.

Tổng kết

- Gán sự kiện cho phần tử cha để quản lý các con - Dùng e.target để xác định chính xác phần tử nào đã được nhấp vào

Hãy thử kỹ thuật Event Delegation trên danh sách nhé.

🧪 Thử nghiệm tại đây

Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.

■ Bài tập thực hành

Lắng nghe sự kiện click trên ul và xuất nội dung của thẻ li được nhấp.

Gợi ý khi gặp khó khăn

Sử dụng e.target để biết phần tử nào thực sự được nhấp.