Τι είναι η ανάθεση;

Ο χειρισμός γεγονότων με ανακατεύθυνση (event delegation) είναι ένα μοτίβο σχεδίασης που επιτρέπει σε έναν μόνο χειριστή γεγονότων να διαχειρίζεται τα γεγονότα πολλών παιδικών στοιχείων. Αντί να αναθέσετε έναν χειριστή σε κάθε στοιχείο, ο χειριστής ανατίθεται στο γονικό στοιχείο. Όταν συμβεί ένα γεγονός σε ένα παιδικό στοιχείο, αυτό "ανεβαίνει" (bubbling) μέχρι τον γονέα, όπου ο χειριστής μπορεί να το πιάσει και να το επεξεργαστεί.

Αρχή λειτουργίας:

• Το γεγονός παράγεται στο στόχο στοιχείο (π.χ., <button>).
• Το γεγονός διαχέεται προς τα πάνω στο δέντρο DOM μέχρι τα γονικά στοιχεία.
• Ο χειριστής γεγονότων, που είναι συνδεδεμένος με το γονικό στοιχείο, το πιάνει.
• Στον χειριστή, μπορεί να προσδιοριστεί σε ποιο παιδικό στοιχείο συνέβη το γεγονός χρησιμοποιώντας το event.target.

Πλεονεκτήματα:

• Απόδοση: Λιγότεροι χειριστές γεγονότων, που μειώνει την κατανάλωση μνήμης και επεξεργαστή, ειδικά για μεγάλες λίστες ή πίνακες.
• Εύκολη διαχείριση: Είναι πιο εύκολο να προσθέσετε και να αφαιρέσετε στοιχεία από το DOM, καθώς δεν χρειάζεται να συνδέετε/αποσυνδέετε συνεχώς χειριστές.
• Καθαρότητα κώδικα: Λιγότερος επαναλαμβανόμενος κώδικας για την προσάρτηση χειριστών.

Παράδειγμα:

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

Χωρίς ανακατεύθυνση, θα έπρεπε να προσθέσουμε έναν χειριστή σε κάθε <li>:

// Λαμβάνουμε όλα τα στοιχεία `<li>`
const listItems = document.querySelectorAll('li');

// Προσθέτουμε χειριστή σε κάθε στοιχείο
listItems.forEach(item => {
    item.addEventListener('click', function() {
        console.log('Κλίκ σε:', this.textContent);
    });
});

Με ανακατεύθυνση, προσθέτουμε έναν χειριστή μόνο στο <ul>:

// Λαμβάνουμε τη γονική λίστα
const list = document.querySelector('ul');

// Προσθέτουμε χειριστή στη λίστα
list.addEventListener('click', function(event) {
    // Ελέγχουμε αν το κλικ ήταν σε ένα `<li>`
    if (event.target.tagName === 'LI') {
        console.log('Κλίκ σε:', event.target.textContent);
    }
});

Σε αυτό το παράδειγμα, χρησιμοποιούμε το event.target για να προσδιορίσουμε ποιο <li> κλίκαρε.