การ bubbling ของเหตุการณ์ใน JavaScript

ลองจินตนาการว่าคุณมีบล็อกหลายอันที่ซ้อนกันอยู่:

<div id="elem1">
	<div id="elem2">
		<div id="elem3"></div>
	</div>
</div>

นำ reference ไปยัง div ของเรามาเก็บในตัวแปร:

let elem1 = document.querySelector('#elem1');
let elem2 = document.querySelector('#elem2');
let elem3 = document.querySelector('#elem3');

และตอนนี้เราจะติดตั้ง handler สำหรับการคลิกลงบนพวกมัน:

elem1.addEventListener('click', function() {
	alert('สีเขียว');
});
elem2.addEventListener('click', function() {
	alert('สีน้ำเงิน');
});
elem3.addEventListener('click', function() {
	alert('สีแดง');
});

ลองแสดงบล็อกของเราบนหน้าจอดู โดยเพิ่ม CSS บางอย่างให้กับพวกมัน:

ลองคลิกบนบล็อกสีแดงที่อยู่ด้านในสุดตอนนี้ แล้วคุณจะ เห็นว่าการคลิกทำงานในบล็อกสีแดงก่อน, จากนั้นในบล็อกสีน้ำเงิน แล้วก็ในบล็อกสีเขียว และ นี่ก็สมเหตุสมผล เพราะการคลิกบนบล็อกด้านใน ก็เท่ากับคุณได้คลิกลงบนบล็อกภายนอกทั้งหมดด้วย

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

พฤติกรรมนี้เรียกว่า bubbling โดยอุปมาอุปมัย กับการลอยขึ้นของฟองอากาศจากก้นน้ำ เช่นเดียวกับฟองอากาศ เหตุการณ์ของเราดูเหมือนจะลอยขึ้น, แต่ละครั้งจะถูกเรียกที่บล็อกที่สูงขึ้น

ลองเขียนโค้ดที่แสดงให้เห็น การ bubbling ของเหตุการณ์ด้วยตัวเองดู ตรวจสอบมันสำหรับการ bubbling ของประเภทเหตุการณ์ต่าง ๆ

ไม่ใช่ทุกเหตุการณ์ที่จะเกิด bubbling ได้ ลองหาดู อย่างน้อยหนึ่งเหตุการณ์ที่ ไม่เกิด bubbling