บทสรุป Event ต่างๆใน Javascript
เหตุการณ์มาตรฐานในจาวาสตริปต์ (จาก wc3schools.com)
ในแต่ละแท็กที่ประกอบกันขึ้นด้วยภาษา HTML เพื่อใช้แสดงหน้าเว็บ หลายๆ แท็กที่ปรากฏนั้นสามารถที่จะตอบสนองต่อเหตุการณ์ต่างๆ ที่เกิดขึ้นได้หลากหลาย ดังเช่น
- เมื่อหน้าเว็บโหลดเสร็จแล้ว หรือเมื่อกำลังจะเปลี่ยนหน้าเว็บไปยังหน้าอื่นหรือปิดหน้าต่าง
- เมื่อผู้ใช้คลิกเลือกหน้าต่างของเว็บบราวเซอร์ หรือเมื่อผู้ใช้คลิกเลือกหน้าต่างโปรแกรมตัวอื่นบนระบบปฏิบัติการ
- เมื่อผู้ใช้เลื่อนเมาส์ไปบนพื้นที่แสดงที่ควบคุมด้วยแท็กนั้นๆ และเมื่อผู้ใช้เลื่อนเมาส์ออกจากพื้นที่แสดง
- เมื่อผู้ใช้คลิกลงไปยังพื้นที่ที่ควบคุมด้วยแท็กนั้นๆ
- เมื่อผู้ใช้แก้ไขข้อมูลที่เป็นองค์ประกอบของฟอร์ม
- เมื่อผู้ใช้กดปุ่ม submit
ในการจัดการต่อเหตุการณ์ต่างๆ เหล่านี้ เราสามารถกระทำได้โดยการอ้างชื่อเหตุการณ์ตามด้วย = และ คำสั่งจาวาสคริปต์ในเครื่องหมาย “” ซึ่งคล้ายคลึงกับการกำหนดแอดตริบิวต์ภายในแท็กทั่วไปนั่นเอง เหตุการณ์ที่สำคัญมีดังเช่น
การโหลดหน้าเว็บและการเปลี่ยน-ปิดเน้าเว็บ
เหตุการณ์ onload จะเกิดขึ้นเมื่อหน้าเว็บได้รับการอ่านและ parsing เรียบร้อยและได้รับการ render เสร็จสิ้น ส่วนเหตุการณ์ onunload จะเกิดขึ้นเมื่อผู้ใช้คลิกเลือกลิงค์เพื่อเปลี่ยนหน้าเว็บไปยังหน้าอื่น ปิดหน้าต่างเว็บ หรือป้อน location ใหม่และกด enter เพื่อเปลี่ยนหน้าเว็บไปหน้าอื่น
การเขียนโค้ดจาวาสคริปต์เพื่อจัดการต่อเหตุการณ์ทั้งสองนี้ จะบรรจุการกำหนดเหตุการณ์ไว้ที่แท็ก <body>
การเลือกองค์ประกอบของฟอร์ม การไปเลือกองค์ประกอบอื่นของฟอร์ม และการแก้ไขข้อมูลของฟอร์ม
สำหรับอินพุตทุกตัวในฟอร์ม เราจะสามารถใช้ onfocus, onblur, และ onchange เพื่อดักจับว่าผู้ใช้ได้คลิกเลือกอินพุตนั้นของฟอร์ม ไปคลิกเลือกตัวอื่น หรือมีการแก้ไขอินพุตของฟอร์ม
การส่งข้อมูลจากฟอร์ม
เมื่อมีการจะส่งข้อมูลจากฟอร์ม จะเกิดเหตุการณ์ onsubmit ซึ่งเราสามารถบรรจุการเซ็ตเหตุการณ์นี้ไว้ในแท็ก form ดังเช่น
| <form method=”post” action=”xxx.htm”
onsubmit=”return checkForm()”> |
สำหรับการตอบสนองต่อเหตุการณ์ onsubmit ตัวนี้มีจุดน่าสนใจคือ เราสามารถส่งค่ากลับไปยังการทำงานของเว็บบราวเซอร์ได้โดยการใช้ return ค่าทางตรรก (ture หรือ false) โดยถ้าค่าส่งกลับเป็นเท็จ จะไม่มีการกระทำการส่งฟอร์ม ดังนั้นเราสามารถเขียนฟังก์ชันตรวจสอบความถูกต้องของฟอร์มและใช้กับเหตุการณ์ onsubmit นี้ได้
การลากเมาส์ไปบนองค์ประกอบ และการลางเมาส์ออกจากองค์ประกอบ
สำหรับองค์ประกอบส่วนใหญ่ของหน้าเว็บ เราสามารถใช้ onmouseover และ onmouseout เพื่อดักจับและตอบสนองต่อเหตุการณ์เมื่อเราลากเมาส์ไปบนพื้นที่หรือลากเมาส์ออกจากพื้นที่ได้
สรุปเหตุการณ์ต่างๆ ที่มีในจาวาสคริปต์
รายละเอียดต่อไปนี้คือเหตุการณ์มาตรฐานของ HTML DOM ที่จาวาสคริปต์สามารถเข้าไปจัดการได้ อนึ่ง แท็ก HTML แต่ละตัวจะรองรับเหตุการณ์ต่างๆ ได้ไม่เท่ากัน รายละเอียดจะได้กล่าวต่อไปในภายหลัง
FF: Firefox, N: Netscape, IE: Internet Explorer
| Attribute | The event occurs when… | FF | N | IE |
| onabort | Loading of an image is interrupted | 1 | 3 | 4 |
| onblur | An element loses focus | 1 | 2 | 3 |
| onchange | The content of a field changes | 1 | 2 | 3 |
| onclick | Mouse clicks an object | 1 | 2 | 3 |
| ondblclick | Mouse double-clicks an object | 1 | 4 | 4 |
| onerror | An error occurs when loading a document or an image | 1 | 3 | 4 |
| onfocus | An element gets focus | 1 | 2 | 3 |
| onkeydown | A keyboard key is pressed | 1 | 4 | 3 |
| onkeypress | A keyboard key is pressed or held down | 1 | 4 | 3 |
| onkeyup | A keyboard key is released | 1 | 4 | 3 |
| onload | A page or an image is finished loading | 1 | 2 | 3 |
| onmousedown | A mouse button is pressed | 1 | 4 | 4 |
| onmousemove | The mouse is moved | 1 | 6 | 3 |
| onmouseout | The mouse is moved off an element | 1 | 4 | 4 |
| onmouseover | The mouse is moved over an element | 1 | 2 | 3 |
| onmouseup | A mouse button is released | 1 | 4 | 4 |
| onreset | The reset button is clicked | 1 | 3 | 4 |
| onresize | A window or frame is resized | 1 | 4 | 4 |
| onselect | Text is selected | 1 | 2 | 3 |
| onsubmit | The submit button is clicked | 1 | 2 | 3 |
| onunload | The user exits the page | 1 | 2 | 3 |
Good post,This was exactly what I needed to read today! I am sure this has relevance to many of us out there.