Βελτιστοποίηση των Χειριστών Γεγονότων στο JavaScript

Ο υπερβολικά μεγάλος αριθμός χειριστών, που είναι προσαρτημένοι σε στοιχεία, καταναλώνουν πολύ μνήμη RAM και οδηγούν σε κολλήματα της σελίδας.

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε μια λίστα:

<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. Κάντε κάθε κύτταρο να χρωματίζεται σε κόκκινο χρώμα όταν γίνεται κλικ πάνω του.