เหตุการณ์ JavaScript
เหตุการณ์ HTML คือ"สิ่งของ"ที่เกิดขึ้นกับองค์ประกอบ HTML
เมื่อใช้ JavaScript ในหน้า HTML JavaScript สามารถ "ตอบสนอง"กับเหตุการณ์เหล่านี้ได้
เหตุการณ์ HTML
เหตุการณ์ HTML อาจเป็นสิ่งที่เบราว์เซอร์ทำ หรือสิ่งที่ผู้ใช้ทำ
ต่อไปนี้คือตัวอย่างบางส่วนของเหตุการณ์ HTML:
- หน้าเว็บ HTML โหลดเสร็จแล้ว
- ฟิลด์อินพุต HTML มีการเปลี่ยนแปลง
- คลิกปุ่ม HTML
บ่อยครั้งเมื่อมีเหตุการณ์เกิดขึ้น คุณอาจต้องการทำบางสิ่ง
JavaScript ให้คุณรันโค้ดเมื่อตรวจพบเหตุการณ์
HTML อนุญาตให้เพิ่มแอตทริบิวต์ตัวจัดการเหตุการณ์ด้วยรหัส JavaScriptลงในองค์ประกอบ HTML
ด้วยคำพูดเดียว:
<element
event='some JavaScript'>
ด้วยเครื่องหมายคำพูดคู่:
<element
event="some JavaScript">
ในตัวอย่างต่อไปนี้onclickแอตทริบิวต์ (พร้อมรหัส) จะถูกเพิ่มไปยัง
<button>องค์ประกอบ:
ตัวอย่าง
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
ในตัวอย่างข้างต้น โค้ด JavaScript เปลี่ยนเนื้อหาขององค์ประกอบด้วย id="demo"
ในตัวอย่างถัดไป โค้ดจะเปลี่ยนเนื้อหาขององค์ประกอบของตัวเอง (โดยใช้this.innerHTML):
ตัวอย่าง
<button onclick="this.innerHTML = Date()">The time is?</button>
โค้ด JavaScript มักจะยาวหลายบรรทัด เป็นเรื่องปกติที่จะเห็นฟังก์ชันการเรียกใช้แอตทริบิวต์เหตุการณ์:
ตัวอย่าง
<button onclick="displayDate()">The time is?</button>
เหตุการณ์ HTML ทั่วไป
นี่คือรายการของเหตุการณ์ HTML ทั่วไปบางส่วน:
| เหตุการณ์ | คำอธิบาย |
|---|---|
| onchange | องค์ประกอบ HTML มีการเปลี่ยนแปลง |
| เมื่อคลิก | ผู้ใช้คลิกองค์ประกอบ HTML |
| onmouseover | ผู้ใช้เลื่อนเมาส์ไปที่องค์ประกอบ HTML |
| onmouseout | ผู้ใช้เลื่อนเมาส์ออกจากองค์ประกอบ HTML |
| onkeydown | ผู้ใช้กดแป้นคีย์บอร์ด |
| onload | เบราว์เซอร์โหลดหน้าเสร็จแล้ว |
รายการยาวกว่านี้มาก: W3Schools JavaScript Reference HTML DOM Events
ตัวจัดการเหตุการณ์ JavaScript
ตัวจัดการเหตุการณ์สามารถใช้เพื่อจัดการและตรวจสอบการป้อนข้อมูลของผู้ใช้ การกระทำของผู้ใช้ และการกระทำของเบราว์เซอร์:
- สิ่งที่ควรทำทุกครั้งที่โหลดเพจ
- สิ่งที่ควรทำเมื่อเพจถูกปิด
- การกระทำที่ควรทำเมื่อผู้ใช้คลิกปุ่ม
- เนื้อหาที่ควรตรวจสอบเมื่อผู้ใช้ป้อนข้อมูล
- และอื่น ๆ ...
สามารถใช้วิธีการต่างๆ มากมายเพื่อให้ JavaScript ทำงานกับเหตุการณ์ได้:
- แอตทริบิวต์เหตุการณ์ HTML สามารถรันโค้ด JavaScript ได้โดยตรง
- แอตทริบิวต์เหตุการณ์ HTML สามารถเรียกใช้ฟังก์ชัน JavaScript ได้
- คุณสามารถกำหนดฟังก์ชันตัวจัดการเหตุการณ์ให้กับองค์ประกอบ HTML ได้
- คุณสามารถป้องกันไม่ให้มีการส่งหรือจัดการกิจกรรม
- และอื่น ๆ ...
คุณจะได้เรียนรู้มากขึ้นเกี่ยวกับเหตุการณ์และตัวจัดการเหตุการณ์ในบท HTML DOM