นิยาม
Event (เหตุการณ์) ใน JavaScript คือการโต้ตอบระหว่างผู้ใช้หรือเบราว์เซอร์กับหน้าเว็บ เช่น โหลดหน้าเว็บ คลิกปุ่ม กดปุ่มคีย์บอร์ด ปิดหน้าต่าง ปรับขนาดหน้าต่าง เป็นต้น
การทำงานของ Events
นักพัฒนาสามารถใช้ Events เหล่านี้เพื่อรันโค้ด JavaScript ตอบสนองต่อการกระทำ เช่น:
- ปิดหน้าต่างเมื่อคลิกปุ่ม
- แสดงข้อความแจ้งเตือน
- ตรวจสอบข้อมูลฟอร์ม (Validation)
- การตอบสนองแบบไดนามิกอื่นๆ
เหตุการณ์มาตรฐาน HTML5 (บางส่วน)
| Attribute | Value | Description |
|---|---|---|
| onoffline | script | เกิดเมื่อเอกสารออฟไลน์ |
| onabort | script | เกิดเมื่อมีการยกเลิกโหลด |
| onafterprint | script | เกิดหลังพิมพ์เอกสาร |
| onbeforeonload | script | เกิดก่อนโหลดเอกสาร |
| onbeforeprint | script | เกิดก่อนพิมพ์เอกสาร |
| onblur | script | เกิดเมื่อหน้าต่างสูญเสียโฟกัส |
| oncanplay | script | เกิดเมื่อสื่อพร้อมเล่นแต่อาจต้องบัฟเฟอร์ |
| oncanplaythrough | script | เกิดเมื่อสื่อเล่นจบได้โดยไม่หยุดบัฟเฟอร์ |
| onchange | script | เกิดเมื่อค่าขององค์ประกอบเปลี่ยนแปลง |
เหตุการณ์อื่นๆที่พบบ่อย
onclick- คลิกเมาส์onmouseover/onmouseout- เมาส์เข้า/ออกองค์ประกอบonkeydown/onkeyup- กด/ปล่อยปุ่มคีย์บอร์ดonsubmit- ส่งฟอร์มonload- โหลดหน้าเว็บเสร็จ
การผูก Event Handler
สามารถผูกได้หลายวิธี:
// 1. Inline HTML attribute (ไม่แนะนำ)
<button onclick="myFunc()">Click</button>
// 2. DOM Property
element.onclick = myFunc;
// 3. addEventListener (แนะนำ - รองรับหลาย handlers)
element.addEventListener('click', myFunc);
