Delegimi i Ngjarjeve në JavaScript

Në mësimin e mëparshëm u përshkrua problemi që lind kur shtohen elemente të rinj, dhe u dha zgjidhja e saj. Në këtë mësim ne do të shqyrtojmë një mënyrë më të përshtatshme për të anashkaluar problemin - delegimi i ngjarjeve. Le ta shpjegojmë atë.

Siç e dini tashmë, duke klikuar në li, ne në të njëjtën kohë klikojmë edhe në ul. Kjo është e mundur falë përhapjes së ngjarjeve. Ne mund e përdorim këtë për të zgjidhur detyrën tonë: do ta vendosim ngjarjen jo në çdo li, por në prindin e tyre ul:

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

Tani në përpunuesin e ngjarjes this do të tregojë elementin të cilit është lidhur përpunuesi, dhe event.target - në elementin ku ka ndodhur ngjarja:

list.addEventListener('click', function(event) {
	console.log(this);         // lista jonë
	console.log(event.target); // pika e listës
});

Le ta bëjmë që li, mbi të cilin ka ndodhur klikimi, të shtojë në fund një shenjë pikëçuditëse:

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

Përsëritni zgjidhjen e dhënë. Sigurohuni që li të reja gjithashtu do të reagojnë në klikim.