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

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

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

html<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:

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