JavaScript - เหตุการณ์

เหตุการณ์คืออะไร?

การโต้ตอบของ JavaScript กับ HTML ได้รับการจัดการผ่านเหตุการณ์ที่เกิดขึ้นเมื่อผู้ใช้หรือเบราว์เซอร์จัดการเพจ

เมื่อหน้าเว็บโหลดเรียกว่าเหตุการณ์ เมื่อผู้ใช้คลิกปุ่มการคลิกนั้นก็เป็นเหตุการณ์เช่นกัน ตัวอย่างอื่น ๆ ได้แก่ เหตุการณ์ต่างๆเช่นการกดปุ่มใด ๆ การปิดหน้าต่างการปรับขนาดหน้าต่างเป็นต้น

นักพัฒนาสามารถใช้เหตุการณ์เหล่านี้เพื่อดำเนินการตอบสนองด้วยรหัส JavaScript ซึ่งทำให้ปุ่มปิดหน้าต่างแสดงข้อความต่อผู้ใช้ข้อมูลที่ต้องตรวจสอบความถูกต้องและการตอบสนองประเภทอื่น ๆ เท่าที่จะเป็นไปได้

เหตุการณ์เป็นส่วนหนึ่งของ Document Object Model (DOM) ระดับ 3 และทุกองค์ประกอบ HTML จะมีชุดของเหตุการณ์ที่สามารถทริกเกอร์โค้ด JavaScript ได้

กรุณาไปผ่านการกวดวิชาเล็ก ๆ นี้เพื่อความเข้าใจที่ดีขึ้นHTML อ้างอิงเหตุการณ์ ที่นี่เราจะเห็นตัวอย่างบางส่วนเพื่อทำความเข้าใจความสัมพันธ์ระหว่างเหตุการณ์และ JavaScript -

onclick ประเภทเหตุการณ์

นี่คือประเภทเหตุการณ์ที่ใช้บ่อยที่สุดซึ่งเกิดขึ้นเมื่อผู้ใช้คลิกปุ่มซ้ายของเมาส์ คุณสามารถใส่การตรวจสอบคำเตือน ฯลฯ กับเหตุการณ์ประเภทนี้ได้

ตัวอย่าง

ลองดูตัวอย่างต่อไปนี้

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>      
   </head>
   
   <body>
      <p>Click the following button and see result</p>      
      <form>
         <input type = "button" onclick = "sayHello()" value = "Say Hello" />
      </form>      
   </body>
</html>

เอาต์พุต

onsubmit ประเภทเหตุการณ์

onsubmitเป็นเหตุการณ์ที่เกิดขึ้นเมื่อคุณพยายามส่งแบบฟอร์ม คุณสามารถตรวจสอบความถูกต้องของแบบฟอร์มกับประเภทเหตุการณ์นี้ได้

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงวิธีใช้ onsubmit เรากำลังเรียกไฟล์validate()ก่อนที่จะส่งข้อมูลแบบฟอร์มไปยังเว็บเซิร์ฟเวอร์ ถ้าvalidate() ฟังก์ชั่นส่งคืนจริงแบบฟอร์มจะถูกส่งมิฉะนั้นจะไม่ส่งข้อมูล

ลองดูตัวอย่างต่อไปนี้

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function validation() {
               all validation goes here
               .........
               return either true or false
            }
         //-->
      </script>      
   </head>
   
   <body>   
      <form method = "POST" action = "t.cgi" onsubmit = "return validate()">
         .......
         <input type = "submit" value = "Submit" />
      </form>      
   </body>
</html>

onmouseover และ onmouseout

ประเภทเหตุการณ์ทั้งสองนี้จะช่วยให้คุณสร้างเอฟเฟกต์ที่สวยงามด้วยรูปภาพหรือแม้กระทั่งกับข้อความได้เช่นกัน onmouseover เหตุการณ์จะทริกเกอร์เมื่อคุณนำเมาส์ไปวางเหนือองค์ประกอบใด ๆ และไฟล์ onmouseoutทริกเกอร์เมื่อคุณเลื่อนเมาส์ออกจากองค์ประกอบนั้น ลองดูตัวอย่างต่อไปนี้

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function over() {
               document.write ("Mouse Over");
            }            
            function out() {
               document.write ("Mouse Out");
            }            
         //-->
      </script>      
   </head>
   
   <body>
      <p>Bring your mouse inside the division to see the result:</p>      
      <div onmouseover = "over()" onmouseout = "out()">
         <h2> This is inside the division </h2>
      </div>         
   </body>
</html>

เอาต์พุต

เหตุการณ์มาตรฐาน HTML 5

เหตุการณ์ HTML 5 มาตรฐานแสดงไว้ที่นี่สำหรับการอ้างอิงของคุณ สคริปต์ที่นี่ระบุฟังก์ชัน Javascript ที่จะดำเนินการกับเหตุการณ์นั้น

แอตทริบิวต์ มูลค่า คำอธิบาย
ออฟไลน์ สคริปต์ ทริกเกอร์เมื่อเอกสารออฟไลน์
Onabort สคริปต์ ทริกเกอร์เหตุการณ์ยกเลิก
หลังจากพิมพ์ สคริปต์ ทริกเกอร์หลังจากพิมพ์เอกสาร
onbeforeonload สคริปต์ ทริกเกอร์ก่อนโหลดเอกสาร
onbeforeprint สคริปต์ ทริกเกอร์ก่อนพิมพ์เอกสาร
onblur สคริปต์ ทริกเกอร์เมื่อหน้าต่างสูญเสียโฟกัส
oncanplay สคริปต์ ทริกเกอร์เมื่อสื่อเริ่มเล่นได้ แต่อาจต้องหยุดเพื่อบัฟเฟอร์
oncanplaythrough สคริปต์ ทริกเกอร์เมื่อสามารถเล่นสื่อจนจบโดยไม่ต้องหยุดบัฟเฟอร์
onchange สคริปต์ ทริกเกอร์เมื่อองค์ประกอบเปลี่ยนแปลง
เมื่อคลิก สคริปต์ ทริกเกอร์เมื่อคลิกเมาส์
oncontextmenu สคริปต์ ทริกเกอร์เมื่อเมนูบริบทถูกทริกเกอร์
ondblclick สคริปต์ ทริกเกอร์เมื่อดับเบิลคลิกเมาส์
ondrag สคริปต์ ทริกเกอร์เมื่อองค์ประกอบถูกลาก
ondragend สคริปต์ ทริกเกอร์เมื่อสิ้นสุดการดำเนินการลาก
ondragenter สคริปต์ ทริกเกอร์เมื่อองค์ประกอบถูกลากไปยังเป้าหมายการดร็อปที่ถูกต้อง
ondragleave สคริปต์ ทริกเกอร์เมื่อองค์ประกอบถูกลากผ่านเป้าหมายการดร็อปที่ถูกต้อง
ondragover สคริปต์ ทริกเกอร์เมื่อเริ่มดำเนินการลาก
ondragstart สคริปต์ ทริกเกอร์เมื่อเริ่มดำเนินการลาก
ondrop สคริปต์ ทริกเกอร์เมื่อองค์ประกอบที่ลากจะถูกทิ้ง
ondurationchange สคริปต์ ทริกเกอร์เมื่อความยาวของสื่อเปลี่ยนไป
ยกเว้น สคริปต์ ทริกเกอร์เมื่อองค์ประกอบทรัพยากรสื่อว่างเปล่าอย่างกะทันหัน
onended สคริปต์ ทริกเกอร์เมื่อสื่อถึงจุดสิ้นสุด
ความผิดพลาด สคริปต์ ทริกเกอร์เมื่อเกิดข้อผิดพลาด
ออนโฟกัส สคริปต์ ทริกเกอร์เมื่อหน้าต่างได้รับโฟกัส
onformchange สคริปต์ ทริกเกอร์เมื่อฟอร์มเปลี่ยนไป
onforminput สคริปต์ ทริกเกอร์เมื่อฟอร์มได้รับการป้อนข้อมูลของผู้ใช้
onhaschange สคริปต์ ทริกเกอร์เมื่อเอกสารมีการเปลี่ยนแปลง
oninput สคริปต์ ทริกเกอร์เมื่อองค์ประกอบได้รับการป้อนข้อมูลของผู้ใช้
oninvalid สคริปต์ ทริกเกอร์เมื่อองค์ประกอบไม่ถูกต้อง
onkeydown สคริปต์ ทริกเกอร์เมื่อกดปุ่ม
onkeypress สคริปต์ ทริกเกอร์เมื่อกดและปล่อยคีย์
onkeyup สคริปต์ ทริกเกอร์เมื่อปล่อยคีย์
onload สคริปต์ ทริกเกอร์เมื่อเอกสารโหลด
onloadeddata สคริปต์ ทริกเกอร์เมื่อโหลดข้อมูลสื่อ
onloadedmetadata สคริปต์ ทริกเกอร์เมื่อโหลดระยะเวลาและข้อมูลสื่ออื่น ๆ ขององค์ประกอบสื่อ
onloadstart สคริปต์ ทริกเกอร์เมื่อเบราว์เซอร์เริ่มโหลดข้อมูลสื่อ
onmessage สคริปต์ ทริกเกอร์เมื่อข้อความถูกทริกเกอร์
onmousedown สคริปต์ ทริกเกอร์เมื่อกดปุ่มเมาส์
onmousemove สคริปต์ ทริกเกอร์เมื่อตัวชี้เมาส์เคลื่อนที่
onmouseout สคริปต์ ทริกเกอร์เมื่อตัวชี้เมาส์เคลื่อนออกจากองค์ประกอบ
onmouseover สคริปต์ ทริกเกอร์เมื่อตัวชี้เมาส์เลื่อนไปที่องค์ประกอบ
onmouseup สคริปต์ ทริกเกอร์เมื่อปล่อยปุ่มเมาส์
onmousewheel สคริปต์ ทริกเกอร์เมื่อล้อเมาส์กำลังหมุน
ออนไลน์ สคริปต์ ทริกเกอร์เมื่อเอกสารออฟไลน์
Onoine สคริปต์ ทริกเกอร์เมื่อเอกสารออนไลน์
ออนไลน์ สคริปต์ ทริกเกอร์เมื่อเอกสารออนไลน์
onpagehide สคริปต์ ทริกเกอร์เมื่อหน้าต่างซ่อนอยู่
onpageshow สคริปต์ ทริกเกอร์เมื่อมองเห็นหน้าต่าง
หยุดชั่วคราว สคริปต์ ทริกเกอร์เมื่อข้อมูลสื่อหยุดชั่วคราว
onplay สคริปต์ ทริกเกอร์เมื่อข้อมูลสื่อกำลังจะเริ่มเล่น
กำลังเล่น สคริปต์ ทริกเกอร์เมื่อข้อมูลสื่อเริ่มเล่น
onpopstate สคริปต์ ทริกเกอร์เมื่อประวัติของหน้าต่างเปลี่ยนไป
onprogress สคริปต์ ทริกเกอร์เมื่อเบราว์เซอร์กำลังดึงข้อมูลสื่อ
onratechange สคริปต์ ทริกเกอร์เมื่ออัตราการเล่นข้อมูลสื่อเปลี่ยนไป
onreadystatechange สคริปต์ ทริกเกอร์เมื่อสถานะพร้อมเปลี่ยน
onredo สคริปต์ ทริกเกอร์เมื่อเอกสารดำเนินการทำซ้ำ
ปรับขนาด สคริปต์ ทริกเกอร์เมื่อปรับขนาดหน้าต่าง
onscroll สคริปต์ ทริกเกอร์เมื่อแถบเลื่อนขององค์ประกอบกำลังถูกเลื่อน
onseeked สคริปต์ ทริกเกอร์เมื่อแอตทริบิวต์การค้นหาขององค์ประกอบสื่อไม่เป็นจริงอีกต่อไปและการค้นหาสิ้นสุดลง
onseeking สคริปต์ ทริกเกอร์เมื่อแอตทริบิวต์การค้นหาขององค์ประกอบสื่อเป็นจริงและการค้นหาได้เริ่มขึ้นแล้ว
เลือก สคริปต์ ทริกเกอร์เมื่อองค์ประกอบถูกเลือก
ติดตั้ง สคริปต์ ทริกเกอร์เมื่อมีข้อผิดพลาดในการดึงข้อมูลสื่อ
ที่จัดเก็บ สคริปต์ ทริกเกอร์เมื่อเอกสารโหลด
onsubmit สคริปต์ ทริกเกอร์เมื่อส่งแบบฟอร์ม
onsuspend สคริปต์ ทริกเกอร์เมื่อเบราว์เซอร์ดึงข้อมูลสื่อ แต่หยุดก่อนที่จะดึงไฟล์สื่อทั้งหมด
ontimeupdate สคริปต์ ทริกเกอร์เมื่อสื่อเปลี่ยนตำแหน่งการเล่น
onundo สคริปต์ ทริกเกอร์เมื่อเอกสารดำเนินการเลิกทำ
onunload สคริปต์ ทริกเกอร์เมื่อผู้ใช้ออกจากเอกสาร
onvolumechange สคริปต์ ทริกเกอร์เมื่อสื่อเปลี่ยนระดับเสียงและเมื่อตั้งค่าระดับเสียงเป็น "ปิดเสียง"
กำลังรอ สคริปต์ ทริกเกอร์เมื่อสื่อหยุดเล่น แต่คาดว่าจะกลับมาทำงานต่อ