วิธีเพิ่ม Event Listener ใน JavaScript: addEventListener()

วิธีที่ดีที่สุดและมาตรฐานในการผูกเหตุการณ์ (Event) กับอีเลเมนต์คือใช้ addEventListener() ข้อดี: ผูกหลาย handlers ได้, ควบคุม phase (capture/bubble), ลบได้ด้วย removeEventListener(), ทำงานกับทุกอีเลเมนต์ (รวม window, document)

ตัวอย่างโค้ด

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>addEventListener</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 20px; font-weight: 500; color: rebeccapurple; }
  </style>
</head>
<body>
  <h1>เพิ่ม Event Listener ใน JavaScript</h1>
  <div style="color: green;" class="result">Hello world</div>
  <button class="Btn">คลิกที่นี่</button>
  <h3>กดปุ่มเพื่อเพิ่มขนาดตัวอักษรข้อความด้านบน</h3>
  <script>
    const resEle = document.querySelector(".result");
    document.querySelector(".Btn").addEventListener("click", () => {
      resEle.style.fontSize = "34px";
    });
  </script>
</body>
</html>

ผลลัพธ์

เมื่อกดปุ่ม "คลิกที่นี่":

Syntax และ Options

element.addEventListener(type, listener, options);
// หรือ
element.addEventListener(type, listener, useCapture); // legacy

// Options object (Modern)
element.addEventListener("click", handler, {
  capture: false,     // true = capture phase, false = bubble phase (default)
  once: false,        // true = ลบ listener อัตโนมัติหลังเรียก 1 ครั้ง
  passive: false,     // true = ไม่เรียก preventDefault() ได้ (ปรับประสิทธิภาพ scroll/touch)
  signal: abortSignal // AbortSignal เพื่อลบผ่าน AbortController
});

รูปแบบการใช้งานทั่วไป

// 1. Named function (เพื่อ removeEventListener ได้)
function handleClick(e) { console.log("clicked"); }
btn.addEventListener("click", handleClick);
btn.removeEventListener("click", handleClick);

// 2. Arrow function (ไม่สามารถ remove ได้โดยตรง ต้องเก็บ reference)
const handler = (e) => console.log("clicked");
btn.addEventListener("click", handler);
btn.removeEventListener("click", handler);

// 3. Once option (รันครั้งเดียว)
btn.addEventListener("click", () => console.log("once"), { once: true });

// 4. Passive (สำหรับ scroll/touch performance)
window.addEventListener("scroll", onScroll, { passive: true });

// 5. AbortController (ยกเลิกหลาย listener พร้อมกัน)
const controller = new AbortController();
btn.addEventListener("click", handler, { signal: controller.signal });
// ภายหลัง...
controller.abort(); // ลบทุก listener ที่ผูก signal นี้

Event Flow: Capture → Target → Bubble

<div id="outer">
  <div id="inner">Click me</div>
</div>

outer.addEventListener("click", () => console.log("outer capture"), true);  // capture
inner.addEventListener("click", () => console.log("inner capture"), true);  // capture
inner.addEventListener("click", () => console.log("inner bubble"), false);  // bubble
outer.addEventListener("click", () => console.log("outer bubble"), false);  // bubble

// Click inner → Log order:
// outer capture → inner capture → inner bubble → outer bubble

วิธีเก่า (ไม่แนะนำ)

• element.onclick = fn — ผูกได้แค่ 1 ฟังก์ชัน ทับซ้อนได้
• <button onclick="fn()"> — Inline handler ผสม HTML/JS ยากดูแลรักษา