Optimierung von Event-Handlern in JavaScript

Eine übermäßig große Anzahl von Event-Handlern, die an Elemente gebunden sind, verbraucht viel Arbeitsspeicher und führt zu Einfrieren der Seite.

Schauen wir uns ein Beispiel an. Nehmen wir an, wir haben eine bestimmte Liste:

<ul></ul>

Holen wir uns eine Referenz auf diese Liste in einer Variable:

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

Füllen wir nun unsere Liste mit li-Tags, indem wir einen Klick-EventHandler an sie binden:

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);
	});
}

Am Ende haben wir so 1000 EventHandler. Das ist sehr viel. Zur Optimierung können wir nur einen einzigen Handler an das ul-Tag binden, indem wir Delegierung verwenden.

Lassen Sie uns das tun. Erstellen wir zunächst einfach die Listeneinträge:

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

Und jetzt führen wir die Delegierung des Event-Handlers durch:

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

Erstellen Sie eine HTML-Tabelle der Größe 100 mal 100. Sorgen Sie dafür, dass jede Zelle bei einem Klick rot eingefärbt wird.