Event delegation เบื้องต้น
ฟังที่พ่อ แทนการผูกทีละลูก
เมื่อรายการถูกสร้าง/ลบบ่อย การผูก listener ทุก li ยุ่งยาก · ผูกที่ ul แล้วดูว่าคลิกตกที่ลูกคนไหน
const list = document.querySelector("#list");
list.addEventListener("click", (event) => {
const target = event.target;
if (!(target instanceof HTMLElement)) return;
if (target.matches("button.delete")) {
target.closest("li")?.remove();
}
});
แนวคิดที่ต้องจำ
เหตุการณ์พุ่งขึ้นตามต้นไม้ (bubbling) — พ่อรับรู้คลิกที่เกิดบนลูกได้
บทนี้รู้จักแนวคิดและรูปแบบ
matches / closest พอใช้ได้ — ยังไม่ต้องลึกเรื่อง capture