คู่มือ JavaScript Onclick: การจัดการเหตุการณ์คลิกแบบขั้นตอน

อีเวนต์ Onclick คืออะไร?

อีเวนต์ onclick ใน JavaScript ใช้สำหรับรันฟังก์ชันเมื่อผู้ใช้คลิกที่ปุ่มหรือองค์ประกอบอื่นๆ บนหน้าเว็บ ทำให้เว็บไซต์มีปฏิสัมพันธ์ (Interactive) ได้

พื้นฐานอีเวนต์ (Event Refresher)

อีเวนต์คือการกระทำที่เกิดขึ้นในเบราว์เซอร์ เช่น การคลิก ส่งฟอร์ม หรือกดแป้นพิมพ์ มี 2 ส่วนหลัก:

• Event Handler: โค้ดที่รันเมื่ออีเวนต์เกิดขึ้น
• Event Listener: ส่วนที่ "ฟัง" และรอการโต้ตอบจากผู้ใช้ แล้วจึงเรียก Handler

รูปแบบการใช้งาน Onclick

1. ใช้ใน HTML โดยตรง (Inline)

<button onclick="codetorun">Click me</button>

2. ใช้ใน JavaScript แบบแยกไฟล์

var item = document.getElementById("button");
item.onclick = function() { 
  // code to execute 
}

ตัวอย่างครบถ้วน: เปลี่ยนข้อความเมื่อคลิกปุ่ม

ไฟล์ index.html

<!DOCTYPE html>
<html>
<head>
  <title>onclick example</title>
</head>
<body>
  <button onclick="changeParagraph()">Click here.</button>
  <p>This text will change when you click the button.</p>
  <script src="js/onclick.js"></script>
</body>
</html>

ไฟล์ onclick.js

const changeParagraph = () => {
  const paragraph = document.querySelector("p");
  paragraph.textContent = "This text has changed because you clicked the button.";
}

เมื่อโหลดหน้าเว็บ จะเห็นปุ่มและข้อความเดิม หลังคลิกปุ่ม ข้อความจะเปลี่ยนตามที่กำหนด

สรุป

onclick() เป็นอีเวนต์พื้นฐานที่สำคัญสำหรับทำให้เว็บไซต์โต้ตอบกับผู้ใช้ได้ สามารถนำไปประยุกต์ใช้งานได้หลากหลาย เช่น แสดง Alert, ตรวจสอบเงื่อนไข, หรือเรียก API ต่างๆ