การจัดการ DOM: querySelector, event listeners

เลือกอิลิเมนต์บนหน้าเว็บ ตอบสนองต่อการคลิก และนำการมอบหมายเหตุการณ์ (event delegation) มาใช้เพื่อโค้ดที่มีประสิทธิภาพ

9 นาที · 3 คำถาม

DOM คือตัวแทนที่มีชีวิตของหน้า HTML ของคุณ: การจัดการมันคือวิธีที่ JavaScript ทำให้อินเทอร์เฟซโต้ตอบได้ คู่หูสำคัญคือ เลือกอิลิเมนต์ แล้วฟังสิ่งที่เกิดขึ้นกับมัน เรามาเริ่มด้วยโครงสร้างตั้งต้นเล็ก ๆ กันก่อน

<button id="save-btn" class="btn">Save</button>
<ul class="task-list">
  <li>Buy groceries</li>
  <li>Call the client</li>
</ul>

querySelector รับตัวเลือก CSS ใด ๆ ก็ได้ (#id, .class, ul li, [data-id]) และคืนอิลิเมนต์แรกที่ตรงเงื่อนไข หรือคืน null ส่วน querySelectorAll คืนอิลิเมนต์ทั้งหมดที่ตรงเงื่อนไขในรูปของ NodeList ซึ่งคุณสามารถวนซ้ำได้ด้วย forEach

const button = document.querySelector("#save-btn");
const firstTask = document.querySelector(".task-list li");
const tasks = document.querySelectorAll(".task-list li");

console.log(tasks.length); // 2
console.log(firstTask.textContent); // "Buy groceries"

หากต้องการตอบสนองต่อการกระทำของผู้ใช้ addEventListener จะผูกฟังก์ชันเข้ากับประเภทของเหตุการณ์: click, input, submit, keydown... ฟังก์ชันจะได้รับออบเจกต์ event ที่อธิบายสิ่งที่เกิดขึ้น จากนั้นคุณสามารถเปลี่ยนเนื้อหาด้วย textContent และเปลี่ยนสไตล์ด้วย classList ได้

const button = document.querySelector("#save-btn");

button.addEventListener("click", () => {
  button.textContent = "Saved!";
  button.classList.add("success");
});

นิสัยที่ดีของมืออาชีพ: รายการที่มี 200 สมาชิกไม่สมควรมี listener ถึง 200 ตัว ให้ผูก listener เพียงตัวเดียวไว้ที่พาเรนต์ แล้วระบุอิลิเมนต์ที่ถูกคลิกด้วย event.target นี่คือการมอบหมายเหตุการณ์ (event delegation): มันใช้ได้แม้กระทั่งกับอิลิเมนต์ที่ถูกเพิ่มเข้ามาภายหลังด้วย

const list = document.querySelector(".task-list");

list.addEventListener("click", (event) => {
  const item = event.target.closest("li");
  if (item) {
    item.classList.toggle("done");
  }
});

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. document.querySelector(".btn") คืนค่าอะไรหากมีหลายอิลิเมนต์ที่มีคลาส btn?
   • อิลิเมนต์ทั้งหมดที่ตรงเงื่อนไข
   • เฉพาะอิลิเมนต์แรกที่ตรงเงื่อนไขเท่านั้น
   • ข้อผิดพลาด เพราะตัวเลือกกำกวม
2. อาร์กิวเมนต์ตัวที่สองของ addEventListener มีบทบาทอะไร?
   • เป็นฟังก์ชันที่ถูกเรียกทำงานทุกครั้งที่เหตุการณ์เกิดขึ้น
   • เป็นเวลาหน่วงก่อนที่จะเริ่มฟัง
   • เป็นตัวเลือก CSS ของอิลิเมนต์เป้าหมาย
3. ใน listener ที่ผูกกับพาเรนต์ event.target แทนอะไร?
   • พาเรนต์ที่ถือ listener อยู่
   • อิลิเมนต์ที่แน่นอนซึ่งเหตุการณ์เกิดขึ้น
   • หน้าต่างเบราว์เซอร์