Πώς να ξεχωρίσετε το JavaScript στην ιστοσελίδα σας

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

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

Εάν απλά αντιγράφετε και χρησιμοποιείτε JavaScripts γραμμένα από άλλα άτομα τότε οι οδηγίες τους για το πώς να προσθέσετε το σενάριό τους στη σελίδα σας μπορεί να έχουν οδηγήσει στο να έχετε ένα ή περισσότερα μεγάλα τμήματα Το JavaScript είναι ενσωματωμένο στην ιστοσελίδα σας και οι οδηγίες του δεν σας λένε πώς μπορείτε να μετακινήσετε αυτόν τον κώδικα από τη σελίδα σας σε ένα ξεχωριστό αρχείο και να έχετε ακόμα το JavaScript δουλειά. Μην ανησυχείτε όμως επειδή, ανεξάρτητα από τον κώδικα JavaScript που χρησιμοποιείτε στη σελίδα σας, μπορείτε εύκολα να μετακινήσετε το JavaScript από τη σελίδα σας και να την ορίσετε ως ξεχωριστό αρχείο (ή αρχεία εάν έχετε ενσωματωμένα περισσότερα από ένα κομμάτια JavaScript στη σελίδα). Η διαδικασία για να γίνει αυτό είναι πάντα η ίδια και απεικονίζεται καλύτερα με ένα παράδειγμα.

instagram viewer

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

Παράδειγμα 1

Παράδειγμα 2

Παράδειγμα 3

Το ενσωματωμένο σας JavaScript πρέπει να μοιάζει με ένα από τα παραπάνω τρία παραδείγματα. Φυσικά, ο πραγματικός σας κώδικας JavaScript θα είναι διαφορετικός από αυτόν που εμφανίζεται, αλλά το JavaScript πιθανότατα θα ενσωματωθεί στη σελίδα χρησιμοποιώντας μία από τις τρεις παραπάνω μεθόδους. Σε ορισμένες περιπτώσεις, ο κώδικας μπορεί να χρησιμοποιεί την παλιά γλώσσα = "javascript" αντί type = "text / javascript" στην οποία περίπτωση μπορεί να θέλετε να πάρετε πιο ενημερωμένο τον κώδικα σας για να ξεκινήσετε με την αντικατάσταση του χαρακτηριστικού γλώσσας με τον τύπο one.

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

  1. Το πρώτο πράγμα που πρέπει να κάνετε για να εξάγετε πραγματικά το JavaScript σε ένα ξεχωριστό αρχείο είναι να ανοίξετε έναν επεξεργαστή απλού κειμένου και να αποκτήσετε πρόσβαση στο περιεχόμενο της ιστοσελίδας σας. Στη συνέχεια, πρέπει να εντοπίσετε το ενσωματωμένο JavaScript που θα περιβάλλεται από μία από τις παραλλαγές του κώδικα που εμφανίζονται στα παραπάνω παραδείγματα.
  2. Αφού εντοπίσετε τον κώδικα JavaScript, πρέπει να τον επιλέξετε και να τον αντιγράψετε στο πρόχειρο. Με το παραπάνω παράδειγμα, επισημαίνεται ο κώδικας που θα επιλεγεί, δεν χρειάζεται να επιλέξετε τις ετικέτες δέσμης ενεργειών ή τα προαιρετικά σχόλια που ενδέχεται να εμφανίζονται γύρω από τον κώδικα JavaScript.
  3. Ανοίξτε ένα άλλο αντίγραφο του επεξεργαστή κειμένου χωρίς κείμενο (ή άλλη καρτέλα εάν ο επεξεργαστής σας υποστηρίζει το άνοιγμα περισσότερων από ένα αρχείων κάθε φορά) και περνάει από το περιεχόμενο JavaScript εκεί.
  4. Επιλέξτε ένα περιγραφικό όνομα αρχείου που θα χρησιμοποιηθεί για το νέο σας αρχείο και αποθηκεύστε το νέο περιεχόμενο χρησιμοποιώντας αυτό το όνομα αρχείου. Με τον κώδικα του παραδείγματος, ο σκοπός του σεναρίου είναι να ξεφύγει από τα πλαίσια, ώστε να μπορεί να είναι ένα κατάλληλο όνομα framebreak.js.
  5. Έτσι τώρα έχουμε το JavaScript σε ένα ξεχωριστό αρχείο που επιστρέφουμε στον επεξεργαστή όπου έχουμε το αρχικό περιεχόμενο της σελίδας για να κάνουμε τις αλλαγές εκεί να συνδεθούν με το εξωτερικό αντίγραφο του σεναρίου.
  6. Καθώς έχουμε τώρα τη δέσμη ενεργειών σε ένα ξεχωριστό αρχείο, μπορούμε να αφαιρέσουμε τα πάντα μεταξύ των ετικετών δέσμης ενεργειών στο αρχικό μας περιεχόμενο, έτσι ώστε το ετικέτα.
  7. Το τελευταίο βήμα είναι να προσθέσετε ένα πρόσθετο χαρακτηριστικό στην ετικέτα δέσμης ενεργειών, προσδιορίζοντας πού μπορεί να βρει το εξωτερικό JavaScript. Κάνουμε αυτό χρησιμοποιώντας ένα src = "όνομα αρχείου" Χαρακτηριστικό. Με το παράδειγμά μας, θα καθορίσαμε src = "framebreak.js".
  8. Η μόνη επιπλοκή σε αυτό είναι αν αποφασίσαμε να αποθηκεύσουμε τα εξωτερικά JavaScripts σε ένα ξεχωριστό φάκελο από τις ιστοσελίδες που τις χρησιμοποιούν. Εάν το κάνετε αυτό, πρέπει να προσθέσετε τη διαδρομή από το φάκελο της ιστοσελίδας στο φάκελο JavaScript μπροστά από το όνομα αρχείου. Για παράδειγμα, εάν οι JavaScripts αποθηκεύονται σε a js στο φάκελο που περιέχει τις ιστοσελίδες μας που θα χρειαζόμασταν src = "js / framebreak.js"

Λοιπόν, τι μοιάζει με τον κώδικα μας αφού διαχωρίσαμε τη JavaScript έξω από ένα ξεχωριστό αρχείο; Στην περίπτωση του παραδείγματος μας JavaScript (υποθέτοντας ότι το JavaScript και η HTML είναι στον ίδιο φάκελο) η HTML μας στην ιστοσελίδα διαβάζει τώρα:

Έχουμε επίσης ένα ξεχωριστό αρχείο που ονομάζεται framebreak.js που περιέχει:

αν (top.location! = self.location) top.location = self.location;

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

Τι γίνεται με αυτές τις άλλες δύο γραμμές σε κάθε ένα από τα παραδείγματα δύο και τρία; Λοιπόν, ο σκοπός αυτών των γραμμών στο παράδειγμα 2 είναι η απόκρυψη του JavaScript από το Netscape 1 και το Internet Explorer 2, κανένα από τα οποία κανείς δεν χρησιμοποιεί πια και έτσι οι γραμμές αυτές δεν χρειάζονται πραγματικά στην πρώτη θέση. Η τοποθέτηση του κώδικα σε ένα εξωτερικό αρχείο αποκρύπτει τον κώδικα από προγράμματα περιήγησης που δεν κατανοούν καλύτερα την ετικέτα δέσμης ενεργειών από ό, τι το περιβάλλει σε ένα σχόλιο HTML ούτως ή άλλως. Το τρίτο παράδειγμα χρησιμοποιείται για σελίδες XHTML που λένε στους επικυρωτές ότι το JavaScript θα πρέπει να αντιμετωπίζεται ως περιεχόμενο σελίδας και όχι να επικυρώνεται ως HTML (αν χρησιμοποιείτε ένα doctype HTML αντί για ένα XHTML, τότε το validator γνωρίζει ήδη αυτό και έτσι οι ετικέτες αυτές δεν είναι απαιτείται). Με τη JavaScript σε ένα ξεχωριστό αρχείο, δεν υπάρχει πλέον JavaScript στη σελίδα που πρέπει να παραλειφθεί από τους επικυρωτές και έτσι οι γραμμές αυτές δεν χρειάζονται πλέον.

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

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

Αυτό είναι το λανθασμένος τρόπος χρήσης του onclick εκτός αν έχετε μια πραγματική ουσιαστική διεύθυνση στο χαρακτηριστικό href, έτσι ώστε τα άτομα χωρίς JavaScript να μεταφερθούν κάπου όταν κάνουν κλικ στον σύνδεσμο. Πολλοί άνθρωποι αφήνουν επίσης το "επιστροφή ψευδής" από αυτόν τον κώδικα και μετά αναρωτιούνται γιατί η κορυφή της τρέχουσας σελίδας φορτώνεται πάντα μετά την εκτέλεση του σεναρίου (το οποίο η href = "#" λέει στη σελίδα να κάνει, εκτός εάν επιστραφεί η ψευδής από όλους τους χειριστές συμβάντων. Φυσικά, εάν έχετε κάτι ουσιαστικό ως προορισμό του συνδέσμου, τότε ίσως θελήσετε να πάτε εκεί μετά την εκτέλεση του κωδικού onclick και στη συνέχεια δεν θα χρειαστείτε το "return false".

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

Εάν θέλετε να εκτελέσετε κάτι όταν οι χρήστες κάνουν κλικ σε κάποιο κείμενο που μπορείτε να χρησιμοποιήσετε:

κάποιο κείμενο

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

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

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

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

 κάποιο κείμενο

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

document.getElementById ('img1') onclick = dosomething; document.getElementById ('sp1') onclick = dosomething;

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

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

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

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

Η καλύτερη λύση είναι να σταματήσετε πλήρως τη χρήση ενός χειριστή συμβάντων και να χρησιμοποιήσετε αντ 'αυτού έναν ακροατή συμβάντων JavaScript (κατά μήκος με το αντίστοιχο attachEvent για το Jscript - αφού αυτή είναι μια από τις καταστάσεις όπου το JavaScript και το JScript διαφέρω). Αυτό μπορούμε να το κάνουμε πιο εύκολα, αρχικά δημιουργώντας μια συνάρτηση addEvent που θα προσθέσει είτε έναν ακροατή είτε ένα συνημμένο, ανάλογα με το ποια από τις δύο υποστηρίζει τη γλώσσα που τρέχει.

συνάρτηση addEvent (el, eType, fn, uC) {if (el.addEventListener) {el.addEventListener (eType, fn, uC); επιστροφή true; } else αν (el.attachEvent) {επιστρέφει el.attachEvent ('on' + eType, fn); } }

Τώρα μπορούμε να επισυνάψουμε την επεξεργασία που θέλουμε να συμβεί όταν κάνουμε κλικ στο στοιχείο μας χρησιμοποιώντας:

addEvent (document.getElementById ('spn1'), 'κλικ', dosomething, false);

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

Αν χρειαζόμαστε τη δυνατότητα να αφαιρέσουμε τις λειτουργίες από αυτό που τρέχει όταν ένα στοιχείο είναι πατημένο τότε μπορούμε να δημιουργήσουμε ένα αντίστοιχη λειτουργία deleteEvent που καλεί την κατάλληλη λειτουργία για την αφαίρεση ενός ακροατή ή συνημμένο Εκδήλωση?

Το μόνο μειονέκτημα αυτού του τελευταίου τρόπου σύνδεσης της επεξεργασίας είναι ότι τα πραγματικά παλιά προγράμματα περιήγησης δεν υποστηρίζουν αυτούς τους σχετικά νέους τρόπους σύνδεσης της επεξεργασίας συμβάντων σε μια ιστοσελίδα. Θα πρέπει να υπάρχουν λίγοι αρκετοί άνθρωποι που χρησιμοποιούν τέτοιους παλαιότερους φυλλομετρητές μέχρι τώρα να τους αγνοήσουν σε ό, τι J (ava) Σενάριο που γράφουμε εκτός από τη γραφή του κώδικα μας με τέτοιο τρόπο ώστε να μην προκαλεί τεράστιο αριθμό σφαλμάτων μηνυμάτων. Η παραπάνω λειτουργία είναι γραμμένη έτσι ώστε να μην κάνει τίποτα αν δεν υποστηρίζεται κανένας από τους τρόπους που χρησιμοποιεί. Τα περισσότερα από αυτά τα παλιότερα προγράμματα περιήγησης δεν υποστηρίζουν τη μέθοδο getElementById για την αναφορά HTML και έτσι είναι απλή αν (! document.getElementById) επιστρέψει ψευδής? στην κορυφή οποιασδήποτε από τις λειτουργίες σας που κάνουν τέτοιες κλήσεις θα ήταν επίσης κατάλληλη. Φυσικά, πολλοί άνθρωποι που γράφουν JavaScript δεν είναι τόσο προσεκτικοί από εκείνους που εξακολουθούν να χρησιμοποιούν παλαιούς browsers και έτσι ώστε αυτοί οι χρήστες πρέπει να συνηθίσουν να βλέπουν σφάλματα JavaScript σε σχεδόν κάθε ιστοσελίδα που επισκέπτονται μέχρι τώρα.

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

Κοιτάζοντας τον κώδικα για τον ακροατή του γεγονότος cross-browser θα παρατηρήσετε ότι υπάρχει μια τέταρτη παράμετρος που κάναμε uC, η χρήση των οποίων δεν είναι προφανής από την προηγούμενη περιγραφή.

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

ετικέτα προς την ετικέτα που ενεργοποίησε το συμβάν ή μπορούν να λειτουργούν από μέσα προς τα έξω ξεκινώντας από την πιο συγκεκριμένη ετικέτα. Αυτά τα δύο καλούνται πιάνω και φυσαλλίδα και τα περισσότερα προγράμματα περιήγησης σάς επιτρέπουν να επιλέξετε ποια σειρά θα πρέπει να εκτελεστεί πολλαπλή επεξεργασία, ρυθμίζοντας αυτή την επιπλέον παράμετρο.
  • uC = true για επεξεργασία κατά τη διάρκεια της φάσης δέσμευσης
  • uC = false για επεξεργασία κατά τη διάρκεια της φάσης φούσκας.

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

Ο Internet Explorer και οι παραδοσιακοί χειριστές συμβάντων επεξεργάζονται πάντοτε τη φάση της φούσκας και ποτέ τη φάση λήψης και συνεπώς πάντα ξεκινούν με την πιο συγκεκριμένη ετικέτα και εργάζονται προς τα έξω.

Έτσι με χειριστές συμβάντων:

xx

κάνοντας κλικ στο xx θα εξερράγη με το χτύπημα και θα ενεργοποιήσει πρώτα την ειδοποίηση («β») και τη δεύτερη (.

Εάν αυτές οι προειδοποιήσεις επισυνάφθηκαν χρησιμοποιώντας ακροατές συμβάντων με uC true τότε όλα τα σύγχρονα προγράμματα περιήγησης εκτός του Internet Explorer θα επεξεργάζονται πρώτα την ειδοποίηση ('a') και στη συνέχεια την ειδοποίηση ('b').

instagram story viewer