Իվենթների օպտիմիզացիա JavaScript-ում

Տարրերին ավելացված չափազանց շատ իվենթների մշակիչներ օգտագործում են հիշողության մեծ ծավալ և հանգեցնում էջի կախվածությունների:

Դիտարկենք օրինակով: Ենթադրենք ունենք որոշակի ցուցակ:

<ul></ul>

Ստացենք այս ցուցակի հղումը փոփոխականի մեջ:

let ul = document.querySelector('ul');

Այժմ լրացնենք մեր ցուցակը li թեգերով, ավելացնելով նրանց համար կլիկի մշակիչ:

for (let i = 1; i <= 1000; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	ul.append(li);
	
	li.addEventListener('click', function() {
		console.log(this.textContent);
	});
}

Արդյունքում ստացվում է, որ մենք ունենք 1000 մշակիչ: Սա շատ մեծ քանակ է: Օպտիմիզացիայի համար մենք կարող ենք ավելացնել միայն մեկ մշակիչ ul թեգի վրա, օգտագործելով դելեգացում:

Եկեք անենք դա: Նախ պարզապես ստեղծենք ցուցակի կետեր:

for (let i = 1; i <= 1000; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	ul.append(li);
}

Եվ այժմ կատարենք իվենթների դելեգացում:

ul.addEventListener('click', function(event) {
	let li = event.target.closest('li');
	
	if (li) {
		console.log(li.textContent);
	}
});

Ստեղծեք HTML աղյուսակ 100 ըստ 100 չափերով: Ապահովեք, որ յուրաքանչյուր բջիջ կլիկի դեպքում ներկվի կարմիր գույնով: