Universaalne sündmuste delegeerimine JavaScriptis
Eelmises õppetükis toodud kood on töötav, kuid mitte ilma puudusteta. Vaatame need puudused lähemalt ja kirjutame universaalsema lahenduse.
Meie koodi puudus ilmneb juhul,
kui li sees on mõningaid pesastatud
tage. Meie puhul olgu need
i tagid:
<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>
Sel juhul viib i tagile vajutamine
hüüumärgi lisamiseni tagi lõppu
i, mitte li tagile, nagu
me sooviksime - sest event.target
sisaldab just seda tagi, kus sündmus
toimus.
Probleemi saab lahendada meetodi closest abil:
list.addEventListener('click', function(event) {
let li = event.target.closest('li');
if (li) {
li.innerHTML = li.innerHTML + '!';
}
});
Korrake toodud lahendust.
