Gebeurte-delegering in JavaScript

In die vorige les is die probleem beskryf wat ontstaan wanneer nuwe elemente bygevoeg word, en die oplossing daarvoor is aangebied. In hierdie les sal ons 'n beter manier ondersoek om die probleem te omseil - gebeurte-delegering. Kom ons kyk daarna.

Soos jy reeds weet, wanneer jy op 'n li klik, klik jy terselfdertyd ook op die ul. Dit is moontlik danksy die opborreling van gebeure. Ons kan dit gebruik om ons taak op te los: ons sal die gebeurtenis nie aan elke li hang nie, maar aan hul ouer ul:

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

Nou sal this in die gebeurtenishanteraar verwys na die element waaraan die hanteraar gekoppel is, en event.target sal verwys na die element waar die gebeurtenis plaasgevind het:

list.addEventListener('click', function(event) {
	console.log(this);         // ons lys
	console.log(event.target); // lyspunt
});

Laat ons maak dat die li waarop geklik is, 'n uitroepteken aan die einde kry:

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

Herhaal die gegewe oplossing. Maak seker dat nuwe li ook op die klik sal reageer.