ในการดำเนินการ JavaScript DOM คุณจะได้พบกับเหตุการณ์ JS Bubbling อย่างแน่นอน สิ่งที่พบบ่อยที่สุดคือเหตุการณ์ป๊อปอัพ Div ดังที่แสดงในรูป
เมื่อคลิกที่ส่วนสีเทาหน้าต่างป๊อปอัพจะหายไปและคลิกที่ส่วนสีดำไม่มีผล
ใช้รหัสต่อไปนี้เพื่อวิเคราะห์เหตุการณ์เดือดของ JS
รหัส HTML:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<tite> เหตุการณ์ Bubbling JS </title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<div>
<H1> การวิเคราะห์เหตุการณ์ BUBBLE JS </H1>
<Hr>
<div>
<ปุ่ม>
คลิกฉัน!
</kout>
</div>
</div>
<script>
var box = document.QuerySelector (". box")
btn = document.querySelector (". btn");
box.onclick = ฟังก์ชั่น (เหตุการณ์) {
การแจ้งเตือน ("I Am Div");
-
btn.onclick = ฟังก์ชั่น (เหตุการณ์) {
การแจ้งเตือน ("ฉันเป็นปุ่ม");
-
</script>
</body>
</html>
การใช้เครื่องมือนักพัฒนาเริ่มต้นของเบราว์เซอร์ Firefox มุมมอง 3D สามารถดูลำดับของชั้น div ได้อย่างชัดเจน
ภาพประกอบ:
เมื่อคลิกที่ปุ่ม "ฉันเป็นปุ่ม" จะปรากฏขึ้นและ "ฉันเป็นดิสนีย์" จะปรากฏขึ้นเนื่องจากเหตุการณ์ปุ่มจะถูกเรียกใช้ก่อนและจากนั้นเหตุการณ์การคลิก DIV ชั้นถัดไปจะถูกทริกเกอร์
การกระตุ้นเหตุการณ์เป็นหลักการแรกในการออก
ภาพประกอบ:
จากนั้นบางครั้งเราไม่ต้องการให้หลายเหตุการณ์ที่จะก่อให้เกิดความขัดแย้งดังนั้นเหตุการณ์จึงมีการหยุด propagation (); วิธีการป้องกันฟองสบู่
นอกจากนี้ยังมีวิธีการจัดกิจกรรมที่ใช้กันทั่วไปเช่นลิงก์ เมื่อฉันคลิกที่ลิงค์ฉันไม่ต้องการกระโดดดังนั้นฉันจึงใช้ event.preventdefault (); วิธี
รหัสตัวอย่างมีดังนี้
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<tite> เหตุการณ์ Bubbling JS </title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<div>
<H1> การวิเคราะห์เหตุการณ์ BUBBLE JS </H1>
<Hr>
<div>
<ปุ่ม>
คลิกฉัน!
</kout>
<a href = "http://www.liteng.org" id = "ลิงก์"> ฉันคือลิงค์ </a>
</div>
</div>
<script>
var box = document.QuerySelector (". box")
btn = document.querySelector (". btn");
box.onclick = ฟังก์ชั่น (เหตุการณ์) {
การแจ้งเตือน ("I Am Div");
-
btn.onclick = ฟังก์ชั่น (เหตุการณ์) {
การแจ้งเตือน ("ฉันเป็นปุ่ม");
Event.StopPropagation ();
-
document.getElementById ('ลิงก์'). onclick = function (เหตุการณ์) {
การแจ้งเตือน ("ฉันเป็นลิงค์");
Event.preventDefault ();
-
/*แยกแยะระหว่างเหตุการณ์ stoppropagation (); และ event.preventdefault ();
วิธีการใช้งาน stoppropagation () เพื่อป้องกันเหตุการณ์จากฟองสบู่
หลังคือการบล็อกพฤติกรรมเริ่มต้นเช่นการปิดกั้นไฮเปอร์ลิงก์
-
</script>
</body>
</html>
คุณสามารถเข้าใจเหตุการณ์เดือดของ JS ได้หรือไม่? หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉัน