Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών. Διαβάστε περισσότερα.

Ο χειρισμός συμβάντων είναι μια σημαντική έννοια στο JavaScript. Τα συμβάντα επιτρέπουν στις σελίδες HTML να είναι δυναμικές και διαδραστικές, επιτρέποντάς σας να δημιουργήσετε ελκυστικές διεπαφές χρήστη. Μπορείτε να γράψετε κώδικα για να εκτελέσετε JavaScript όταν συμβαίνει ένα συμβάν στο DOM.

Ένα συμβάν μπορεί να είναι όταν ένας χρήστης κάνει κλικ σε ένα στοιχείο HTML, η σελίδα φορτώνεται ή όταν αλλάζει η τιμή ενός πεδίου εισαγωγής. Μπορείτε να γράψετε κώδικα που αλλάζει τη δομή HTML όταν εμφανίζεται ένα συμβάν. Μάθετε τρεις διαφορετικούς τρόπους με τους οποίους μπορείτε να προσθέσετε προγράμματα ακρόασης συμβάντων στον κώδικά σας.

1. Η μέθοδος addEventListener

Η μέθοδος addEventListener είναι μια από τις δημοφιλείς μεθόδους ακρόασης συμβάντων. Έχει τρεις παραμέτρους:

  • Ένα αντικείμενο που αντιπροσωπεύει το γεγονός.
    • instagram viewer
  • Μια λειτουργία για να το χειριστείτε.
  • Ένα προαιρετικό boolean, useCapture, το οποίο περιγράφει πώς διαδίδεται το συμβάν σε όλο το DOM.

Το συμβάν μπορεί να είναι οποιοδήποτε καθορισμένο συμβάν DOM σε ένα στοιχείο προορισμού. Μια συνάρτηση έχει ρυθμιστεί για να ανταποκρίνεται σε αυτό το συμβάν όταν συμβεί.

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

Η addEventListener() είναι μια συνιστώμενη μέθοδος για τη διαχείριση προγραμμάτων ακρόασης συμβάντων σε JavaScript. Λειτουργεί σε οποιοδήποτε στόχο συμβάντων, όχι μόνο σε στοιχεία HTML, και υποστηρίζει πολλαπλούς χειριστές συμβάντων.

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

Ας το επεξηγήσουμε με τον ακόλουθο κώδικα:

html>
<html>
<σώμα>
<h1>Η μέθοδος addEventListener με συναρτήσειςh1>
<κουμπίταυτότητα="myBtn">Κάντε κλικ ΕΔΩκουμπί>
<Πταυτότητα="διαδήλωση">Π>
σώμα>
html>

Στη συνέχεια, προσθέστε το πρόγραμμα ακρόασης συμβάντος χρησιμοποιώντας το κουμπί.

συνθ στοιχείο = έγγραφο.getElementById("myBtn");
element.addEventListener("Κάντε κλικ", myFunction1);
λειτουργίαmyFunction1() {
έγγραφο.getElementById("διαδήλωση").innerHTML += «Το Fuction εκτελέστηκε! "
}

Όταν κάνετε κλικ στο κουμπί, το κείμενο «Εκτέλεσε λειτουργία» εκτυπώνεται στην οθόνη, όπως φαίνεται παρακάτω.

2. Ανάθεση συμβάντων στο addEventListener

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

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

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

html>
<html>
<σώμα>
<h1> Αντιπροσωπεία εκδήλωσης στα κουμπιάh1>
<div>
<κουμπί>Κουμπί 1κουμπί>
<κουμπί>Κουμπί 2κουμπί>
<κουμπί>Κουμπί 3κουμπί>
div>
σώμα>
html>

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

συνθ div = έγγραφο.querySelector('div')
div.addEventListener("Κάντε κλικ", (γεγονός) => {
αν (event.target.tagName 'ΚΟΥΜΠΙ') {
κονσόλα.κούτσουρο('Έγινε κλικ στο κουμπί')
 }
});

Η ανάθεση συμβάντων είναι ένα μοτίβο που βασίζεται στη δημιουργία φυσαλίδων συμβάντων. Η δημιουργία φυσαλίδων συμβάντων συμβαίνει όταν ένα στοιχείο λαμβάνει ένα συμβάν και το μεταδίδει στα γονικά και προγονικά στοιχεία του στο DOM. Είναι ένα διάδοση γεγονότων έννοια που συμβαίνει από προεπιλογή στο JavaScript.

3. Χρησιμοποιώντας το onclick Χαρακτηριστικό

Μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό onclick για να εκτελέσετε JavaScript όταν οι χρήστες κάνουν κλικ σε ένα στοιχείο. Όπως και η μέθοδος addEventListener, μπορείτε να χρησιμοποιήσετε τη μέθοδο onclick για να εκτυπώσετε κείμενο, να εκτελέσετε υπολογισμούς και να αλλάξετε τις λειτουργίες στοιχείων στο το DOM.

Μπορείτε να προσθέσετε το πρόγραμμα ακρόασης συμβάντων onclick ως ενσωματωμένο χειριστή συμβάντων στο στοιχείο HTML. Το συμβάν εμφανίζεται όταν ένας χρήστης κάνει κλικ στο στοιχείο. Αλλάξτε το χρώμα της παρακάτω παραγράφου δυναμικά με τη μέθοδο onclick:

html>
<html>
<σώμα>
<h1> Εκτελέστε συμβάντα onClickh1>
<Πταυτότητα="διαδήλωση"στο κλικ="myFunction()">
 Κάντε κλικ σε εμένα για να αλλάξετε το χρώμα του κειμένου μου.
Π>
σώμα>
html>

Στο αρχείο JavaScript, προσθέστε τον ακόλουθο κώδικα:

λειτουργίαmyFunction() {
έγγραφο.getElementById("διαδήλωση").στυλ.χρώμα = "το κόκκινο";
}

Η έξοδος θα εμφανιστεί όπως φαίνεται:

Γιατί να μάθετε για τους ακροατές εκδηλώσεων;

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