วิธีเรียกฟังก์ชัน JavaScript เมื่อคลิก (Click Event)

การโต้ตอบของ JavaScript กับ HTML จัดการผ่าน Events (เหตุการณ์) ที่เกิดเมื่อผู้ใช้หรือเบราว์เซอร์จัดการหน้าเว็บ

• โหลดหน้า = event
• คลิกปุ่ม = event
• กดปุ่มคีย์บอร์ด, ปิดหน้าต่าง, ย่อ/ขยายหน้าต่าง = events

เหตุการณ์ onclick เกิดเมื่อผู้ใช้คลิกปุ่มซ้ายของเมาส์ ใช้สำหรับ validation, warning, เรียกฟังก์ชัน ฯลฯ

ตัวอย่าง: เรียกฟังก์ชันเมื่อคลิกปุ่ม

<html>
  <head>
    <script>
      function sayHello() {
        alert("Demo Alert");
      }
    </script>
  </head>
  <body>
    <p>Click the following button and see result</p>
    <form>
      <input type="button" onclick="sayHello()" value="Click" />
    </form>
  </body>
</html>

วิธีสมัยใหม่ (Modern Approach) – addEventListener

<button id="myBtn">Click</button>
<script>
  document.getElementById('myBtn').addEventListener('click', function() {
    alert('Demo Alert');
  });
</script>

เหตุการณ์เมาส์ยอดนิยม

แนะนำ: ใช้ addEventListener แทน inline event handlers (onclick="...") เพื่อแยก HTML กับ JS และเพิ่ม/ลบ event ได้หลายตัว