JavaScript รองรับ HTML Events จำนวนมาก ผ่าน Event Handler Attributes (on...) และ addEventListener() ตารางด้านล่างแสดง Events พบบ่อย
Mouse Events
| Attribute | Event | Trigger เมื่อ |
|---|
onclick | click | คลิกเมาส์ซ้าย |
ondblclick | dblclick | ดับเบิลคลิก |
onmousedown | mousedown | กดปุ่มเมาส์ |
onmouseup | mouseup | ปล่อยปุ่มเมาส์ |
onmousemove | mousemove | เลื่อนเมาส์ |
onmouseover | mouseover | เมาส์เข้าพื้นที่ (Bubbles) |
onmouseout | mouseout | เมาส์ออกพื้นที่ (Bubbles) |
onmouseenter | mouseenter | เมาส์เข้าพื้นที่ (ไม่ Bubble) |
onmouseleave | mouseleave | เมาส์ออกพื้นที่ (ไม่ Bubble) |
oncontextmenu | contextmenu | คลิกขวา/เปิด Context Menu |
onwheel | wheel | เลื่อน Scroll Wheel |
Drag & Drop Events
| Event | Trigger |
|---|
ondragstart | เริ่มลาก |
ondrag | กำลังลาก (ทุก Frame) |
ondragend | จบการลาก |
ondragenter | เข้าพื้นที่ Drop Target |
ondragover | อยู่เหนือ Drop Target |
ondragleave | ออกจาก Drop Target |
ondrop | ปล่อย (Drop) |
Keyboard Events
| Event | Trigger |
|---|
onkeydown | กดปุ่ม (ซ้ำถ้ากดค้าง) |
onkeypress | กดปุ่มที่พิมพ์ได้ (Deprecated) |
onkeyup | ปล่อยปุ่ม |
Form Events
| Event | Trigger |
|---|
onsubmit | Submit Form |
onreset | Reset Form |
onchange | ค่าเปลี่ยนและ Blur (select, checkbox, file) |
oninput | ค่าเปลี่ยน Real-time (text, textarea) |
onfocus | ได้ Focus |
onblur | เสีย Focus |
Window/Document Events
| Event | Trigger |
|---|
onload | โหลดเสร็จ (window, img, script, iframe) |
onunload | ออกจากหน้า |
onresize | Resize Window |
onscroll | Scroll หน้า |
onerror | Error เกิดขึ้น |
onbeforeunload | ก่อน Unload (Confirm Navigation) |
แนะนำ: ใช้ addEventListener
element.addEventListener('click', handler);
// แทน onclick="handler()"
