Τι είναι το μοντέλο συμβάντων στον περιηγητή…

Μέθοδος διαχείρισης αλληλεπιδράσεων χρήστη (κλικ, εισαγωγή, hover) και συστημικών γεγονότων (φόρτωση σελίδας, σφάλματα) στον ιστότοπο.

Βασικές έννοιες:

Γεγονός: Η ενέργεια που συνέβη.
Χειριστής γεγονότος: Συνάρτηση που εκτελείται κατά την εμφάνιση του γεγονότος.
Αντικείμενο γεγονότος (Event object): Μεταβιβάζεται στον χειριστή και περιέχει πληροφορίες σχετικά με το γεγονός (τύπος, στοιχείο, συντεταγμένες κ.λπ.).

Τυπική ροή γεγονότων:

Αποκορύφωση (Capturing): Το γεγονός κατεβαίνει από το ανώτερο στοιχείο DOM (Window, Document) στο στοιχείο στόχο. Οι χειριστές σε αυτό το στάδιο ενεργοποιούνται πρώτοι.
Φάση στόχου (Target phase): Το γεγονός φτάνει στο στοιχείο στόχο όπου συνέβη.
Bubbling (Φάση αναδίπλωσης): Το γεγονός ανεβαίνει από το στοιχείο στόχο μέσω του DOM πίσω στο Window. Οι χειριστές σε αυτό το στάδιο ενεργοποιούνται μετά τις φάσεις αποκορύφωσης και στόχου.

Προσθήκη χειριστών:

HTML χαρακτηριστικά (onclick, onload): Παρωχημένη μέθοδος, δεν συνιστάται για πολύπλοκες εφαρμογές.
Ιδιότητες στοιχείων DOM (element.onclick): Μπορεί να οριστεί μόνο ένας χειριστής ανά τύπο γεγονότος για κάθε στοιχείο.
```
// Παράδειγμα
const button = document.querySelector('button');
button.onclick = function() {
    alert('Πατήθηκε το κουμπί!');
};
```
Μέθοδος addEventListener: Προτιμώμενη μέθοδος. Επιτρέπει την προσθήκη πολλαπλών χειριστών σε ένα γεγονός και τον έλεγχο της φάσης διαχείρισης (αποκορύφωση ή αναδίπλωση).
```
// Παράδειγμα
const button = document.querySelector('button');
button.addEventListener('click', function(event) {
    console.log('Κλικ στο κουμπί!', event);
}, false); // false - αναδίπλωση, true - αποκορύφωση
```

Η μέθοδος removeEventListener χρησιμοποιείται για την αφαίρεση χειριστών.

Αποστολή γεγονότων (Event delegation): Προσθήκη ενός χειριστή σε έναν γονικό στοιχείο για τη διαχείριση γεγονότων από τα παιδικά στοιχεία. Εξοικονομεί πόρους και απλοποιεί τη δουλειά με δυναμικό περιεχόμενο.

// Παράδειγμα αποστολής
const list = document.querySelector('ul');
list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Κλικ σε στοιχείο λίστας:', event.target.textContent);
    }
});

Τι είναι το μοντέλο συμβάντων στον περιηγητή;