Event delegation in JavaScript

ในบทเรียนที่แล้ว ได้อธิบายถึงปัญหาที่เกิดขึ้นเมื่อเพิ่มองค์ประกอบใหม่และได้ให้วิธีแก้ไขไว้ ในบทเรียนนี้ เราจะมาดูวิธีที่ดีกว่าในการแก้ไขปัญหานี้ - การมอบหมายเหตุการณ์ มาวิเคราะห์กัน

ดังที่คุณทราบแล้ว การคลิกที่ li นั้น เราก็กำลังคลิกที่ ul พร้อมกันไปด้วย สิ่งนี้เป็นไปได้เนื่องจากเหตุการณ์แบบ bubbling เราสามารถใช้สิ่งนี้เพื่อแก้ไขปัญหาของเราได้: เราจะไม่ได้ติดตั้งเหตุการณ์ไว้ที่แต่ละ li แต่จะติดตั้งที่ ul ซึ่งเป็น parent ของพวกมันแทน:

javascriptlist.addEventListener('click', function() {
  
});

ตอนนี้ในตัวจัดการเหตุการณ์ this จะชี้ไปยังองค์ประกอบที่ตัวจัดการถูกติดตั้งไว้ และ event.target จะชี้ไปยังองค์ประกอบที่เหตุการณ์เกิดขึ้น:

javascriptlist.addEventListener('click', function(event) {
  console.log(this);         // list ของเรา
  console.log(event.target); // รายการ list ของเรา
});

มาทำให้เครื่องหมายอัศเจรีย์ถูกเพิ่มที่ส่วนท้ายของ li ที่มีการคลิกเกิดขึ้น:

javascriptlist.addEventListener('click', function(event) {
  event.target.textContent = event.target.textContent + '!';
});