Event onClick คืออะไร
เหตุการณ์ onclick เกิดขึ้นเมื่อผู้ใช้คลิกปุ่มซ้ายของเมาส์ที่องค์ประกอบ HTML ใดๆ นี่คือ Event ที่ใช้บ่อยที่สุดสำหรับการโต้ตอบผู้ใช้
วิธีการผูก Event Handler
1. Inline HTML Attribute (แบบเก่า)
<input type="button" onclick="display()" value="Click me" />
2. DOM Property (แบบเก่า)
document.getElementById("myBtn").onclick = display;
3. addEventListener (แนะนำ - มาตรฐานสมัยใหม่)
document.getElementById("myBtn").addEventListener("click", display);
ตัวอย่างโค้ดสมบูรณ์
<html>
<head>
<script>
function display() {
alert("Hello World");
}
</script>
</head>
<body>
<p>Click the following button and see result</p>
<form>
<input type="button" onclick="display()" value="Click me" />
</form>
</body>
</html>
ส่ง Parameter ให้ฟังก์ชัน
<!-- Inline -->
<button onclick="greet('John')">Greet John</button>
<!-- addEventListener -->
<button id="btn">Greet Jane</button>
<script>
document.getElementById("btn").addEventListener("click", function() {
greet("Jane");
});
function greet(name) {
alert("Hello, " + name + "!");
}
</script>
Object Event (Event Object)
ฟังก์ชัน Handler จะรับอาร์กิวเมนต์ event (หรือ e) อัตโนมัติ:
function handleClick(event) {
console.log("Element clicked:", event.target);
console.log("Mouse position:", event.clientX, event.clientY);
event.preventDefault(); // ยกเลิกพฤติกรรมเริ่มต้น (เช่น link)
}
แนวทางปฏิบัติที่ดี (Best Practices)
- ใช้
addEventListenerแทน Inline Attribute (Separation of Concerns) - ใช้ Named Function แทน Anonymous Function เพื่อให้ Remove Event ได้
- หลีกเลี่ยง Inline Script ใน HTML Attribute
- ใช้ Event Delegation สำหรับองค์ประกอบที่สร้างไดนามิกหรือจำนวนมาก
สรุป
การเรียกฟังก์ชันจาก onclick ทำได้หลายวิธี แต่อย่างดีที่สุดคือใช้ addEventListener ซึ่งยืดหยุ่น รองรับหลาย Handler และจัดการได้ดีกว่า
