Events (เหตุการณ์) ใน JavaScript คืออะไร

Events คือ กลไกที่ JavaScript โต้ตอบกับ HTML เมื่อผู้ใช้หรือเบราว์เซอร์กระทำอะไรบนหน้าเว็บ (โหลดหน้า, คลิก, พิมพ์, Resize, ฯลฯ) Events เป็นส่วนหนึ่งของ DOM Level 3 ทุก HTML Element มีชุด Events ของตัวเอง

เหตุการณ์ทั่วไป

ตัวอย่าง: onclick

<html>
  <head>
    <script>
      function sayHello() {
        alert("Hello World");
      }
    </script>
  </head>
  <body>
    <p>คลิกปุ่มด้านล่างและดูผลลัพธ์</p>
    <form>
      <input type="button" onclick="sayHello()" value="Say Hello" />
    </form>
  </body>
</html>

วิธีผูก Event (Event Binding)

Event	Trigger เมื่อ
`onclick`	คลิกเมาส์ซ้าย
`ondblclick`	ดับเบิลคลิก
`onmousedown`	กดปุ่มเมาส์
`onmouseup`	ปล่อยปุ่มเมาส์
`onmouseover`	เมาส์เข้าพื้นที่
`onmouseout`	เมาส์ออกพื้นที่
`onkeydown`	กดปุ่มคีย์บอร์ด
`onkeyup`	ปล่อยปุ่มคีย์บอร์ด
`onload`	โหลดเสร็จ (window, img, script)
`onresize`	ปรับขนาดหน้าต่าง
`onscroll`	เลื่อน Scroll
`onchange`	ค่า Input เปลี่ยน (select, checkbox, file)
`onsubmit`	Submit Form
`oninput`	พิมพ์ใน Input (Real-time)

Event Object

element.addEventListener('click', function(event) {
  event.type;        // "click"
  event.target;      // Element ที่ trigger event
  event.currentTarget; // Element ที่ listener ผูกอยู่
  event.clientX/Y;   // ตำแหน่งเมาส์
  event.preventDefault(); // ยกเลิก default behavior
  event.stopPropagation(); // หยุด Bubbling
});

Event Phases

Capturing Phase: จาก Window ลงมาถึง Target
Target Phase: ที่ Element เป้าหมาย
Bubbling Phase: จาก Target ขึ้นกลับ Window (Default)

แนะนำ: ใช้ addEventListener เสมอ หลีกเลี่ยง Inline Handlers

วิธีตั้งค่าเวลาเป็น Timezone อื่นใน JavaScript

วิธีส่ง Object เป็น Parameter ในฟังก์ชัน JavaScript

วิธี	ตัวอย่าง	ข้อดี/ข้อเสีย
Inline HTML Attribute	`<button onclick="fn()">`	ง่าย แต่ผสม HTML/JS, ไม่แยก concerns, 1 handler ต่อ event
DOM Property	`btn.onclick = fn`	แยกได้ แต่ยัง 1 handler ต่อ event
addEventListener (แนะนำ)	`btn.addEventListener('click', fn)`	หลาย handlers, capturing/bubbling, remove ได้, แยก concerns