Αυτό το σεμινάριο θα καθορίσει τη διαδικασία για τον τρόπο ρύθμισης του onClick με JavaScript.
Τρόπος ρύθμισης onClick με JavaScript
Για να ρυθμίσετε το στο κλικ με τη JavaScript, υπάρχουν δύο διαφορετικές μέθοδοι, οι οποίες είναι:
- Η πρώτη μέθοδος είναι να εκχωρήσετε μια τιμή στο στοιχείο HTML στο κλικ χαρακτηριστικό χρησιμοποιώντας JavaScript.
- Η δεύτερη μέθοδος είναι να προσθέσετε ρητά ένα πρόγραμμα ακρόασης συμβάντων στο συμβάν HTML που ελέγχει για το ' Κάντε κλικ ' Εκδήλωση.
Παράδειγμα 1: Εκχωρήστε μια τιμή στο onclick χαρακτηριστικό του στοιχείου HTML χρησιμοποιώντας JavaScript
Στο αρχείο HTML, δημιουργήστε μια επικεφαλίδα και ένα κουμπί ' Κάντε κλικ με 'με την ταυτότητα' js ” η οποία θα ενεργοποιήσει τη λειτουργία JavaScript ενώ κάνετε κλικ σε αυτήν.
< h2 > Σειρά Ιδιότητα onClick Με JavaScript h2 >
< αναγνωριστικό κουμπιού = 'js' > Κάντε κλικ με κουμπί >
Στο επόμενο βήμα, θα γίνει πρόσβαση στο κουμπί που δημιουργήθηκε και θα εμφανιστεί ένα ' στο κλικ ” θα προσαρτηθεί σε αυτό το χαρακτηριστικό. Μόλις κάνετε κλικ στο κουμπί, η καθορισμένη λειτουργία θα εκτελεστεί και το ' στυλ.φόντοΧρώμα Η ιδιότητα ' θα αλλάξει το χρώμα του κουμπιού ως εξής:
έγγραφο. getElementById ( 'js' ) . στο κλικ = λειτουργία jsFunc ( ) {
έγγραφο. getElementById ( 'js' ) . στυλ . χρώμα του φόντου = 'Μωβ' ;
}
Η αντίστοιχη έξοδος θα είναι:
Παράδειγμα 2: Προσθέστε ρητά ένα πρόγραμμα ακρόασης συμβάντων στο συμβάν HTML
Δημιουργήστε ένα κουμπί ' Κάντε κλικ ΕΔΩ! 'και εκχωρεί ένα αναγνωριστικό' Εκδήλωση ” σε αυτό που θα ενεργοποιήσει τη μέθοδο addEventListener() στο 'Κάντε κλικ' Εκδήλωση:
< αναγνωριστικό κουμπιού = 'Εκδήλωση' > Κάντε κλικ ΕΔΩ ! ισχυρός > κουμπί ισχυρός >>
Πάρτε το κουμπί χρησιμοποιώντας το ταυτότητα και μετά επισυνάψτε ένα ' addEventListener() ' μέθοδος περνώντας ένα ' Κάντε κλικ «γεγονός και λειτουργία» eventFunc ' όπου θα αλλάξει το χρώμα φόντου του κουμπιού:
έγγραφο. getElementById ( 'Εκδήλωση' ) . addEventListener ( 'Κάντε κλικ' , eventFunc ) ;λειτουργία eventFunc ( ) {
έγγραφο. getElementById ( 'Εκδήλωση' ) . στυλ . χρώμα του φόντου = 'Πράσινος' ;
}
Παραγωγή
Παράδειγμα 3: Χρήση όλων των μεθόδων onClick ταυτόχρονα
Σε αυτό το παράδειγμα, η λειτουργία όλων των μεθόδων θα εμφανιστεί ταυτόχρονα. Ο πρώτος είναι ο προεπιλεγμένος τρόπος προσθήκης του χαρακτηριστικού onclick μέσα στην ίδια την ετικέτα HTML. Μετά από αυτό, έχουν επιδειχθεί και οι δύο μέθοδοι ρύθμισης του χαρακτηριστικού onclick με τη βοήθεια JavaScript.
Στο παρακάτω παράδειγμα, δημιουργήστε τρία κουμπιά και δείτε τη λειτουργικότητα του χαρακτηριστικού onclick.
- Το πρώτο κουμπί ' Κάντε κλικ 'θα καλέσει το ' htmlFunc() ' στο συμβάν κλικ.
- Το κουμπί ' Κάντε κλικ με Το ' θα έχει πρόσβαση με το αναγνωριστικό που του έχει εκχωρηθεί ' js ' και, στη συνέχεια, αντιστοιχίστε μια τιμή στο χαρακτηριστικό onclick του κουμπιού χρησιμοποιώντας JavaScript.
- Το κουμπί ' Κάντε κλικ ΕΔΩ! Η πρόσβαση στο ' θα γίνει χρησιμοποιώντας το αναγνωριστικό ' Εκδήλωση ' και μετά επισυνάψτε ένα ' addEventListener() ” μέθοδος με αυτό:
< αναγνωριστικό κουμπιού = 'js' > Κάντε κλικ με κουμπί >< br >< br >
< αναγνωριστικό κουμπιού = 'Εκδήλωση' > Κάντε κλικ ΕΔΩ ! κουμπί >
Η παρακάτω συνάρτηση θα ενεργοποιήσει το ' στο κλικ «συμβάν του κουμπιού» Κάντε κλικ ”:
λειτουργία htmlFunc ( ) {συναγερμός ( 'Το κουμπί στο οποίο έγινε κλικ από την εκδήλωση HTML onClick' ) ;
}
Κάνοντας κλικ στο « Κάντε κλικ στο Me ', η ακόλουθη λειτουργία θα ενεργοποιηθεί όπου θα εμφανιστεί ένα προειδοποιητικό μήνυμα.
έγγραφο. getElementById ( 'js' ) . στο κλικ = λειτουργία jsFunc ( ) {συναγερμός ( 'Το κουμπί στο οποίο έγινε κλικ από τη λειτουργία JavaScript onClick' ) ;
}
Η δεδομένη λειτουργία θα ενεργοποιήσει το κουμπί ' Κάντε κλικ ΕΔΩ! ”:
έγγραφο. getElementById ( 'Εκδήλωση' ) . addEventListener ( 'Κάντε κλικ' , eventFunc ) ;λειτουργία eventFunc ( ) {
συναγερμός ( 'Το κουμπί που έγινε κλικ από JavaScript onClick with EventListener Method' ) ;
}
Η έξοδος θα εμφανίζει μηνύματα ειδοποίησης σε κάθε κλικ κουμπιού:
συμπέρασμα
Για να ορίσετε το onclick με JavaScript, υπάρχουν δύο διαφορετικές προσεγγίσεις, η πρώτη είναι να εκχωρήσετε μια τιμή στο χαρακτηριστικό onclick του στοιχείου HTML χρησιμοποιώντας JavaScript και η δεύτερη προσέγγιση είναι να προσθέσετε ρητά ένα πρόγραμμα ακρόασης συμβάντων στο συμβάν HTML που ελέγχει για το ' Κάντε κλικ ' Εκδήλωση. Αυτό το σεμινάριο έχει ορίσει τις μεθόδους ρύθμισης onClick με JavaScript μαζί με παραδείγματα.