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 | สคริปต์ | ทริกเกอร์เมื่อสื่อเปลี่ยนระดับเสียงและเมื่อตั้งค่าระดับเสียงเป็น "ปิดเสียง" |
| กำลังรอ | สคริปต์ | ทริกเกอร์เมื่อสื่อหยุดเล่น แต่คาดว่าจะกลับมาทำงานต่อ |