การมอบหมายเหตุการณ์สากลใน JavaScript

โค้ดที่นำเสนอในบทเรียนที่แล้วใช้งานได้ อย่างไรก็ตาม ไม่ได้ปราศจากข้อบกพร่อง มาดูข้อบกพร่องเหล่านี้และเขียน วิธีแก้ปัญหาที่เป็นสากลมากขึ้นกัน

ข้อบกพร่องของโค้ดของเราจะแสดงออกมาในกรณี เมื่อภายใน li มีแท็กที่ซ้อนกันอยู่ ในกรณีของเรา ให้เป็นแท็ก i:

<ul>
	<li>item <i>italic</i> item</li>
	<li>item <i>italic</i> item</li>
	<li>item <i>italic</i> item</li>
	<li>item <i>italic</i> item</li>
	<li>item <i>italic</i> item</li>
</ul>

ในกรณีนี้ การคลิกที่แท็ก i จะนำไปสู่ การเพิ่มเครื่องหมายอัศเจรีย์ที่ ท้าย แท็ก i ไม่ใช่ที่แท็ก li อย่าง ที่เราต้องการ - เพราะใน event.target จะได้แท็กที่เกิดเหตุการณ์ขึ้นนั้น

สามารถแก้ไขปัญหาได้ด้วยเมธอด closest:

list.addEventListener('click', function(event) {
	let li = event.target.closest('li');
	
	if (li) {
		li.innerHTML = li.innerHTML + '!';
	}
});

ทำซ้ำวิธีแก้ปัญหาที่นำเสนอ