home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

เมธอด addEventListener() ของ DOM: ผูก Event Handler แบบมาตรฐาน

เมธอด addEventListener() คืออะไร?

เมธอด addEventListener() ใช้สำห ผูก Event Handler (ฟังก์ชันจัดการเหตุการณ์) ให้กับอิลิเมนต์** เป็นวิธีมาตรฐาน (W3C DOM Level 2) แทนที่วิธีเก่า onclick, onmouseover เป็นต้น

ไวยากรณ์ (Syntax)

element.addEventListener(event, function, capture);

พารามิเตอร์

พารามิเตอร์คำอธิบายจำเป็น
eventชื่อเหตุการณ์ (ไม่ต้องมี on นำหน้า) เช่น "click", "mouseover", "keydown"Yes
functionฟังก์ชัน Callback ที่จะรันเมื่อเกิดเหตุการณ์Yes
captureBoolean: true = Capture Phase, false = Bubble Phase (Default)No

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
  <h2>ตัวอย่าง Event Listener</h2>
  <button id="btn">คลิกฉัน</button>
  <p id="log"></p>
  
  <script>
    var btn = document.getElementById("btn");
    var log = document.getElementById("log");
    
    // ผูกหลาย Event ให้ปุ่มเดียวได้
    btn.addEventListener("mouseover", function() {
      log.innerHTML += "เมาส์ชี้ปุ่ม! ";
    });
    
    btn.addEventListener("click", function() {
      log.innerHTML += "!! กดปุ่มแล้ว !! ";
    });
    
    btn.addEventListener("mouseout", function() {
      log.innerHTML += "เมาส์ออกจากปุ่ม. ";
    });
  </script>
</body>
</html>

ผลลัพธ์

ชี้เมาส์ที่ปุ่ม → "เมาส์ชี้ปุ่ม!"
คลิกปุ่ม → "!! กดปุ่มแล้ว !!"
เลื่อนเมาส์ออก → "เมาส์ออกจากปุ่ม."

ข้อดีของ addEventListener()

  • ผูก **หลาย Handler** ให้ Event เดียวได้ (ไม่ทับซ้อน)
  • ควบคุม Phase ได้ (Capture vs Bubble)
  • แยก HTML และ JavaScript (Unobtrusive)
  • ลบได้ด้วย removeEventListener()
  • รองรับ Options Object: { once: true, passive: true, capture: false }

Options Object (Modern)

element.addEventListener('click', handler, {
  once: true,        // รันครั้งเดียว แล้วลบตัวเองออก
  passive: true,     // บอกเบราวเซอร์ว่าไม่มี preventDefault() เพิ่ม Performance (scroll/touch)
  capture: false     // Bubble phase (default)
});

Event Flow: Capture → Target → Bubble

<div id="parent">
  <button id="child">Click</button>
</div>

parent.addEventListener('click', () => console.log('Parent Capture'), true);  // 1. Capture
child.addEventListener('click', () => console.log('Child Capture'), true);     // 2. Capture
child.addEventListener('click', () => console.log('Child Bubble'), false);     // 3. Target + Bubble
parent.addEventListener('click', () => console.log('Parent Bubble'), false);   // 4. Bubble

// คลิก Child → Log: Parent Capture, Child Capture, Child Bubble, Parent Bubble