Universele Gebeurtenisdelegasie in JavaScript
Die kode wat in die vorige les aangebied is, is werkend, maar nie sonder gebreke nie. Kom ons kyk na hierdie gebreke en skryf 'n meer universele oplossing.
Die gebrek van ons kode sal sigbaar word in die geval
wanneer daar binne li enige geneste
tags is. In ons geval laat dit i tags wees:
<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>
In hierdie geval sal 'n klik op die i tag lei
tot die byvoeging van 'n uitroepteken aan die einde
van die tag i, en nie die li tag nie, soos
ons sou wou - omdat in event.target
presies daardie tag beland waar die gebeurtenis plaasgevind het.
Die probleem kan opgelos word met die closest metode:
list.addEventListener('click', function(event) {
let li = event.target.closest('li');
if (li) {
li.innerHTML = li.innerHTML + '!';
}
});
Herhaal die voorgestelde oplossing.
