เพื่อเรียกฟังก์ชันเมื่อคลิกปุ่มใน JavaScript ให้ใช้แอตทริบิวต์ onclick ในองค์ประกอบ HTML (เช่น <button> หรือ <input type="button">)
ตัวอย่าง
<html>
<head>
<script>
function sayHello() {
document.write("Hello there!");
}
</script>
</head>
<body>
<p>คลิกปุ่มด้านล่างเพื่อเรียกใช้ฟังก์ชัน</p>
<form>
<input type="button" onclick="sayHello()" value="Say Hello">
</form>
<p>ลองเปลี่ยนข้อความใน write method แล้วทดสอบดู</p>
</body>
</html>
วิธีการอื่น (แนะนำมากกว่า)
แยก JavaScript ออกจาก HTML โดยใช้ addEventListener:
<button id="myBtn">Say Hello</button>
<script>
document.getElementById("myBtn").addEventListener("click", function() {
document.write("Hello there!");
});
</script>
เหตุผลที่ควรใช้ addEventListener
- แยกหน้าที่ (Separation of Concerns): HTML ดูแลโครงสร้าง, JS ดูแลพฤติกรรม
- ผูก event listener หลายตัวได้
- สามารถลบ listener ได้ด้วย
removeEventListener - รองรับ event capturing/bubbling
- ง่ายต่อการบำรุงรักษาและทดสอบ
เหตุการณ์คลิกอื่นๆ: ondblclick (ดับเบิลคลิก), onmousedown, onmouseup
