Bài đọc

DOM và sự kiện: tình huống lỗi và cách chẩn đoán

3 phút đọc

Đây là bài 4 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.

Tình huống lỗi

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.

Chẩn đoán có bằng chứng

Trong bài dom và sự kiện, hãy cố ý tái hiện tình huống trên ở môi trường thử nghiệm. Mục tiêu là thấy vì sao kết quả sai và thu thập đủ bằng chứng để phân biệt lỗi dữ liệu, lỗi quy tắc và lỗi cấu hình. Không sửa đồng thời nhiều yếu tố vì bạn sẽ khó xác định nguyên nhân.

Ghi rõ bước thao tác và kết quả mong đợi.
Thu nhỏ ví dụ đến mức vẫn tái hiện được lỗi.
Đối chiếu dữ liệu thực với giả định ban đầu.
Đặt giả thuyết và thay đổi một yếu tố.
Xác nhận bằng cách tái chạy ví dụ tối thiểu.

Mẫu đối chiế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);
});

Kiểm tra sau sửa

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

Khi lỗi biến mất, thực hiện lại yêu cầu gốc: 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. Sau đó thử trường hợp đầu vào rỗng hoặc trạng thái chưa được khởi tạo nếu phù hợp. Một bản sửa phải khôi phục hành vi đã định nghĩa, không chỉ làm mất thông báo lỗi.

Ghi chú bàn giao