เหตุการณ์เดือดพล่าน
กระบวนการเดือดปุด ๆ ของเหตุการณ์เริ่มต้นด้วยองค์ประกอบที่ทริกเกอร์เหตุการณ์และจากนั้นจึงเพิ่มไปยังองค์ประกอบที่มีในลำดับชั้น
บทสรุป
ในตัวอย่างต่อไปนี้ เรามี 3 องค์ประกอบ div , ช่วง และปุ่ม .
- เพื่อรักษาลำดับชั้น เราต้องการ ปุ่ม องค์ประกอบที่จะซ้อนอยู่ภายใน ช่วง องค์ประกอบ และ ช่วง องค์ประกอบที่จะซ้อนอยู่ภายใน div องค์ประกอบ.
- กำหนดเหตุการณ์การคลิกให้กับองค์ประกอบทั้งหมด เพื่อให้เมื่อองค์ประกอบได้รับการคลิก ช่องแจ้งเตือนควรเปิดขึ้นโดยแสดงข้อความที่เกี่ยวข้องตามที่แสดงในตัวอย่าง
- หลังจากรันโปรแกรม รูปภาพที่แสดงด้านล่างจะถูกดำเนินการบนหน้าจอ
- เมื่อองค์ประกอบได้รับการคลิก องค์ประกอบภายนอกขององค์ประกอบนั้นโดยอัตโนมัติ (ที่มีองค์ประกอบ) ก็จะถูกทำให้เป็นฟองและดำเนินการ
- ตัวอย่างเช่น หากเราคลิกที่องค์ประกอบที่ซ้อนกันมากที่สุด (ปุ่ม) จากนั้นกล่องแจ้งเตือนขององค์ประกอบอื่น (span, div) จะเปิดขึ้นทีละรายการตามลำดับชั้น
- สมมุติว่าถ้าเราคลิกที่ สแปน องค์ประกอบแล้วกล่องแจ้งเตือนของ ช่วง และองค์ประกอบที่มี div จะ เปิดทีละคน
- 8) กระบวนการของการกระตุ้นองค์ประกอบและจากนั้น bubbling จนถึงองค์ประกอบที่มีในลำดับชั้นเรียกว่า เหตุการณ์ bubbling .
- 9) องค์ประกอบที่ถูกเรียกและทำให้เกิดฟองขึ้นจะถูกดำเนินการ
ตัวอย่าง
<html>
<head>
<style>
.styleClass{
display:table-cell;
border:1px solid black;
padding: 20px;
text-align:center;
}
</style>
</head>
<body>
<div class = "styleClass" onclick = "alert('Div clicked')">Div element
<span class = "styleClass" onclick ="alert('Span clicked')">span element
<input type = "button" value = "click me" onclick="alert('Button clicked')">
</span>
</div>
</body>
</html> หลังจากรันโปรแกรมในตัวแก้ไขโค้ดแล้ว รูปภาพต่อไปนี้จะแสดงขึ้น
เมื่อคลิกที่ปุ่ม 'click me' (องค์ประกอบของปุ่ม) ผลลัพธ์ต่อไปนี้จะแสดงขึ้น
ผลลัพธ์
ผลลัพธ์ต่อไปนี้จะแสดงเมื่อคลิกปุ่ม "คลิกฉัน" ด้านบน (องค์ประกอบของปุ่ม)
on clicking ok on above button alert box, we will get the following alert box with message span clicked.
on clicking ok on above span alert box, we will get the following alert box with message div clicked.
