Πώς να χειριστείτε το χειρισμό συμβάντων σε JavaScript (παραδείγματα και όλα)

Σε αυτό το ιστολόγιο, θα προσπαθήσω να ξεκαθαρίσω τις βασικές αρχές του μηχανισμού χειρισμού εκδηλώσεων σε JavaScript, χωρίς τη βοήθεια οποιασδήποτε εξωτερικής βιβλιοθήκης όπως Jquery / React / Vue.

Θα εξηγήσω τα ακόλουθα θέματα σε αυτό το άρθρο:

  1. Το έγγραφο και τα αντικείμενα του παραθύρου και η προσθήκη συμβάντων σε αυτά.
  2. Η μέθοδος Event.preventDefault () και η χρήση της.
  3. Η μέθοδος Event.stopPropagation () με ένα παράδειγμα.
  4. Πώς να αφαιρέσετε ένα πρόγραμμα ακρόασης από ένα στοιχείο.

Αντικείμενα εγγράφων και παραθύρων με το πρόγραμμα ακρόασης συμβάντων

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

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

Πώς να προσθέσετε τον ακροατή στο αντικείμενο παραθύρου

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

Υπάρχει ένας ακόμη τρόπος που ονομάζεται "on" ιδιοκτησία onclick, onmouseover και ούτω καθεξής. Αλλά δεν είναι τόσο χρήσιμο, καθώς δεν μας επιτρέπει να προσθέσουμε πολλαπλούς ακροατές συμβάντων στο ίδιο στοιχείο. Οι άλλες μέθοδοι το επιτρέπουν.

Ένα αντικείμενο συμβάντος μεταβιβάζεται ως όρισμα (προαιρετικό) στον χειριστή που περιέχει όλες τις πληροφορίες που σχετίζονται με το συμβάν (στην περίπτωσή μας, mousedown) στο παράθυρο.

Ανοίξτε τα εργαλεία προγραμματιστή (Inspect Element) σε αυτήν τη σελίδα και αντιγράψτε επικολλήστε τον ακόλουθο κώδικα στον πίνακα κονσόλας και πατήστε enter.

window.addEventListener("mousedown",function(event){ alert("window"); console.log(event); });

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

Σημείωση : Εάν μεταβείτε σε οποιαδήποτε άλλη καρτέλα και κάνετε δεξί κλικ, τότε αυτό το συμβάν δεν θα ενεργοποιηθεί επειδή ανήκει μόνο σε αυτήν την καρτέλα (αντικείμενο παραθύρου).

Οι λεπτομέρειες της εκδήλωσης mousedown

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

κουμπί : Δεδομένου ότι αυτό ήταν το συμβάν mousedown, θα σας πει το κουμπί που κάνατε κλικ. Για το ποντίκι, αριστερά, μεσαία και δεξιά αντιστοιχούν στα 0, 1 και 2 αντίστοιχα. Εάν κάνετε κλικ στο δεξί κουμπί, μπορείτε να δείτε την τιμή 2.

clientX και clientY : Θέση σε σχέση με το πάνω αριστερό μέρος της περιοχής περιεχομένου (Viewport). Απλώς αναλύστε την αξία αυτών των ιδιοτήτων με το μέρος που κάνατε κλικ και μπορείτε να δείτε πώς σχετίζονται. Ακόμα κι αν κάνετε κύλιση προς τα κάτω στη σελίδα, αυτές οι ιδιότητες παραμένουν οι ίδιες. Αναφορά ScreenX και ScreenY από την επάνω αριστερή πλευρά της οθόνης (Monitor).

altkey / ctrlkey : Εάν κρατήσετε πατημένο οποιοδήποτε από αυτά τα πλήκτρα κατά την εκτέλεση της λειτουργίας δεξιού κλικ, τότε μπορείτε να δείτε ότι αυτές οι τιμές είναι αληθείς Διαφορετικά, είναι ψευδείς όπως στην περίπτωσή μας.

target: Αντιστοιχεί στο στοιχείο στο οποίο εκτελέσατε την ενέργεια. Όποιο στοιχείο κι αν έχετε κάνει κλικ, μπορείτε να δείτε τις πληροφορίες που αντιστοιχούν σε αυτήν την ιδιότητα στην κονσόλα

Τι είναι ένα αντικείμενο εγγράφου ;

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

Η μέθοδος Event.preventDefault () και η χρήση της

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

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

  Google  let link = document.querySelector("a"); // It is the method to access the first matched element link.addEventListener("click", function(event) { console.log("Redirecting Stopped"); event.preventDefault(); });   

Μπορείτε να δημιουργήσετε ένα αρχείο HTML και να δείτε αυτόν τον κώδικα.

Η μέθοδος Event.stopPropagation ()

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

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

Φανταστείτε ότι έχετε ένα κουμπί μέσα σε μια παράγραφο και έχετε επισυνάψει ένα συμβάν mousedown και στους δύο. Θέλετε να επιτύχετε τις ακόλουθες περιπτώσεις χρήσης:

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

Λύση:

Hello Ho Button2

// Event Listener on the Button and it's logic document.getElementById("button12").addEventListener("mousedown", function(event) { alert("button clicked"); if (event.button == 2) // Right Click event.stopPropagation(); }); // Event Listener on the paragraph element with it's logic: document.getElementById("demo").addEventListener("mousedown", function(event) { alert("Paragraph clicked"); });

Κατάργηση ενός προγράμματος ακρόασης συμβάντων από ένα στοιχείο

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

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

Document.getElementbyId("id_name").removeEventListener("click",fn_name)

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

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