Τι είναι τα συμβάντα στο JavaScript [Επεξήγηση με παραδείγματα]

Εκδηλώσεις είναι ενέργειες ή περιστατικά που συμβαίνουν σε μια εφαρμογή Ιστού.

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

Άλλα παραδείγματα συμβάντων περιλαμβάνουν την αλλαγή μεγέθους ενός παραθύρου, την κύλιση ενός εγγράφου ή τη φόρτωση μιας σελίδας.

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

Χειρισμός συμβάντων σε JavaScript

Για να χειριστούμε συμβάντα σε JavaScript, μπορούμε να χρησιμοποιήσουμε προγράμματα ακρόασης συμβάντων.

Οι ακροατές συμβάντων είναι συναρτήσεις που καλούνται όταν συμβαίνει ένα συγκεκριμένο συμβάν σε ένα στοιχείο προορισμού.

Μπορούμε να προσθέσουμε ένα πρόγραμμα ακρόασης συμβάντων σε ένα στοιχείο χρησιμοποιώντας τη μέθοδο «addEventListener()».

Το πρώτο όρισμα για το "addEventListener()" είναι το όνομα συμβάντος και το δεύτερο όρισμα είναι η συνάρτηση χειριστή συμβάντων.

`` Javascript

const button =document.querySelector('button');

// Προσθέστε ένα πρόγραμμα ακρόασης συμβάντων για το συμβάν «κλικ» στο κουμπί

button.addEventListener('κλικ', () => {

console.log('Έγινε κλικ στο κουμπί!');

});

```

Στο παραπάνω παράδειγμα, προσθέτουμε ένα πρόγραμμα ακρόασης συμβάντων σε ένα στοιχείο κουμπιού για το συμβάν «κλικ».

Όταν ο χρήστης κάνει κλικ στο κουμπί, εκτελείται η λειτουργία χειρισμού συμβάντων και το μήνυμα «Το κουμπί έγινε κλικ!» καταγράφεται στην κονσόλα.

Μπορούμε επίσης να αφαιρέσουμε προγράμματα ακρόασης συμβάντων από στοιχεία χρησιμοποιώντας τη μέθοδο `removeEventListener()`.

Το πρώτο όρισμα για το "removeEventListener()" είναι το όνομα συμβάντος και το δεύτερο όρισμα είναι η συνάρτηση χειριστή συμβάντων.

`` Javascript

button.removeEventListener('κλικ', () => {

console.log('Έγινε κλικ στο κουμπί!');

});

```

Στο παραπάνω παράδειγμα, αφαιρούμε το πρόγραμμα ακρόασης συμβάντων για το συμβάν «κλικ» από το στοιχείο κουμπιού.

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

Αντικείμενο συμβάντος

Όταν συμβαίνει ένα συμβάν, ένα αντικείμενο ονομάζεται αντικείμενο συμβάντος δημιουργείται.

Το αντικείμενο συμβάντος περιέχει πληροφορίες σχετικά με το συμβάν, όπως το στοιχείο προορισμού, τον τύπο συμβάντος και τη θέση του ποντικιού.

Μπορούμε να έχουμε πρόσβαση στο αντικείμενο συμβάντος σε μια συνάρτηση χειριστή συμβάντων χρησιμοποιώντας την παράμετρο «συμβάν».

`` Javascript

button.addEventListener('κλικ', (γεγονός) => {

console.log(event);

});

```

Στο παραπάνω παράδειγμα, καταγράφουμε το αντικείμενο συμβάντος στην κονσόλα.

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

Αναπαραγωγή και λήψη συμβάντων

Συμβάντα με φυσαλίδες αναφέρεται στον τρόπο με τον οποίο τα γεγονότα διαδίδονται μέσω του δέντρου DOM.

Όταν συμβαίνει ένα συμβάν, ενεργοποιείται πρώτα στο στοιχείο προορισμού.

Εάν το στοιχείο προορισμού δεν διαθέτει πρόγραμμα ακρόασης συμβάντων για το συμβάν, το συμβάν θα εμφανιστεί με φυσαλίδες στο γονικό στοιχείο.

Αυτό συνεχίζεται έως ότου το συμβάν φτάσει στην κορυφή του δέντρου DOM.

Λήψη συμβάντος είναι το αντίθετο της φυσαλίδας γεγονότων.

Όταν είναι ενεργοποιημένη η καταγραφή συμβάντων, τα συμβάντα ενεργοποιούνται πρώτα στην κορυφή του δέντρου DOM και στη συνέχεια διαδίδονται μέχρι το στοιχείο προορισμού.

Μπορούμε να ενεργοποιήσουμε την καταγραφή συμβάντων ορίζοντας την τρίτη παράμετρο της μεθόδου «addEventListener()» σε «true».

`` Javascript

button.addEventListener('κλικ', (γεγονός), true);

```

Στο παραπάνω παράδειγμα, ενεργοποιούμε τη λήψη συμβάντων για το συμβάν «κλικ» στο στοιχείο του κουμπιού.

Αυτό σημαίνει ότι το συμβάν «κλικ» θα ενεργοποιηθεί πρώτα στην κορυφή του δέντρου DOM και στη συνέχεια θα διαδοθεί στο στοιχείο του κουμπιού.

Συμπέρασμα

Τα συμβάντα αποτελούν θεμελιώδες μέρος της JavaScript και χρησιμοποιούνται για να κάνουν τις εφαρμογές Ιστού πιο διαδραστικές και ανταποκρινόμενες.

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