Univerzalno delegiranje dogodkov v JavaScript

Koda iz prejšnje lekcije je delujoča, vendar ni brez pomanjkljivosti. Razpravljajmo o teh pomanjkljivostih in napišimo bolj univerzalno rešitev.

Pomanjkljivost naše kode se bo pokazala v primeru, ko bodo znotraj li nekateri gnezdeni oznake. V našem primeru naj bodo to oznake 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>

V tem primeru bo klik na oznako i povzročil dodajanje klicaja na konec oznake i, in ne oznake li, kot bi želeli - saj v event.target pade ravno tista oznaka, v kateri se je zgodil dogodek.

Težavo je mogoče rešiti z metodo closest:

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

Ponovite navedeno rešitev.