Bài đọc

DOM và sự kiện: nền tảng và mô hình tư duy

3 phút đọc

Đây là bài 1 của chương 4: DOM và sự kiện, thuộc khóa demo JavaScript. Nội dung được dùng để trải nghiệm cấu trúc chương trình học; hãy thực hành trên dữ liệu và môi trường thử nghiệm riêng. Trong dự án xuyên suốt, bạn sẽ xây dựng ứng dụng danh sách công việc có tìm kiếm, lọc và lưu trạng thái trên trình duyệt.

Mục tiêu cụ thể

DOM là cây đối tượng biểu diễn tài liệu. Gắn sự kiện vào cha chung có thể xử lý các phần tử con được thêm sau này. Dữ liệu người dùng nên đưa vào textContent khi muốn hiển thị văn bản.

Hiểu vấn đề trước khi dùng công cụ

Chương này tập trung vào một quyết định cụ thể: Tạo danh sách có nút hoàn thành từng mục và thêm mục mới bằng form. Đừng bắt đầu bằng cách chép nguyên ví dụ. Hãy chỉ ra thành phần nào là dữ liệu, thành phần nào là quy tắc và đâu là kết quả quan sát được. Một giải pháp đúng với dữ liệu mẫu vẫn có thể sai khi đầu vào rỗng, kích thước lớn hơn hoặc có hai thao tác xảy ra gần nhau.

Ví dụ tối thiểu

const list = document.querySelector("#tasks");
list.addEventListener("click", event => {
  const button = event.target.closest("button[data-id]");
  if (!button || !list.contains(button)) return;
  console.log(button.dataset.id);
});

Giới hạn cần hiểu

Gắn listener sau mỗi lần render mà không dọn dẹp gây chạy lặp. Chèn đầu vào người dùng bằng innerHTML có thể tạo nguy cơ thực thi mã không mong muốn.

Câu hỏi để tự giải thích

Bạn sẽ giải thích dom và sự kiện cho người mới bằng ví dụ nào?
Phần nào của ví dụ là giả định, phần nào cần kiểm tra bằng thực nghiệm?
Nếu bỏ một điều kiện quan trọng, kết quả sẽ sai ở đâu?

Kết quả cần đạt

Mục thêm mới nhận được sự kiện
Mỗi click chỉ xử lý một lần
Nội dung nhập hiển thị như văn bản