การส่ง Event Object จากฟังก์ชันหนึ่งไปอีกฟังก์ชันใน JavaScript

Event Object ใน JavaScript มีข้อมูลเกี่ยวกับ Event ที่เกิดขึ้น (target, type, coordinates, key pressed ฯลฯ) สามารถส่งต่อให้ฟังก์ชันอื่นได้โดยตรงผ่าน Parameter

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Pass Event Object</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
  </style>
</head>
<body>
  <h1>ส่ง Event Object ระหว่าง Functions</h1>
  <button class="Btn" onclick="changeFont(event)">คลิกที่นี่</button>
  <h3>คลิกปุ่มด้านบนเพื่อเปลี่ยน Font Size และ Color</h3>
  <script>
    function changeFont(event) {
      // event.target = Element ที่ Trigger Event (Button)
      event.target.style.fontSize = "32px";
      // ส่ง Event Object ต่อให้ฟังก์ชันถัดไป
      changeColor(event);
    }
    
    function changeColor(event) {
      // ใช้ Event Object เดียวกัน เข้าถึง target เดียวกัน
      event.target.style.color = "red";
    }
  </script>
</body>
</html>

Event Object Properties สำคัญ

Best Practices

// ✅ Good: ส่ง event ตรงๆ
function handleClick(event) {
  processEvent(event);
}

// ✅ Good: Destructuring เฉพาะที่ต้องใช้
function handleClick({ target, type, preventDefault }) {
  preventDefault();
  processTarget(target);
}

// ❌ Bad: ใช้ Global Event (Legacy, Deprecated)
function handleClick() {
  const event = window.event; // IE Only, ไม่ควรใช้
}

ผลลัพธ์

ปุ่มเปลี่ยน Font Size เป็น 32px และ Color เป็น Red