Εκδηλώσεις DOM JavaScript: Onclick και Onload

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

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

Υπάρχει ένας αριθμός των DOM (Document Object Model) Γεγονότα που μπορείτε να ακούσετε στο JavaScript, αλλά onclickκαι onloadείναι από τα πιο κοινά.

Εκδήλωση Onclick

Το onclickσυμβάν σε JavaScript σας επιτρέπει να εκτελέσετε μια συνάρτηση όταν κάνετε κλικ σε ένα στοιχείο.

Παράδειγμα

Click me  function myFunction() { alert('Button was clicked!'); } 

Στο απλό παράδειγμα παραπάνω, όταν ένας χρήστης κάνει κλικ στο κουμπί, θα εμφανιστεί μια ειδοποίηση στο πρόγραμμα περιήγησής του Button was clicked!.

Προσθήκη onclickδυναμικά

Το παραπάνω παράδειγμα λειτουργεί, αλλά θεωρείται γενικά κακή πρακτική. Αντ 'αυτού, είναι καλύτερο να διαχωρίσετε το περιεχόμενο της σελίδας (HTML) από τη λογική (JS).

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

click on this element.

const p = document.getElementById("foo"); // Find the paragraph element in the page p.onclick = showAlert; // Add onclick function to element function showAlert(event) { alert("onclick Event triggered!"); }

Σημείωση

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

Στο παραπάνω παράδειγμα, όταν ένας χρήστης κάνει κλικ στο paragraphστοιχείο στο html, θα δει μια ειδοποίηση να εμφανίζεται onclick Event triggered.

Αποτροπή προεπιλεγμένης ενέργειας

Ωστόσο, αν επισυνάψουμε onclickσε συνδέσμους ( aετικέτα HTML ), ίσως θέλουμε να αποτρέψουμε την προεπιλεγμένη ενέργεια:

Guides  const link = document.getElementById("bar"); // Find the link element link.onclick = myAlert; // Add onclick function to element function myAlert(event) { event.preventDefault(); alert("Link was clicked but page was not open"); } 

Στο παραπάνω παράδειγμα αποτρέψαμε την προεπιλεγμένη συμπεριφορά του aστοιχείου (άνοιγμα συνδέσμου) μέσω event.preventDefault()της onclickλειτουργίας επιστροφής κλήσης.

Εκδήλωση φόρτωσης

Το onloadσυμβάν χρησιμοποιείται για την εκτέλεση μιας λειτουργίας JavaScript αμέσως μετά τη φόρτωση μιας σελίδας.

Παράδειγμα:

const body = document.body; body.onload = myFunction; function myFunction() { alert('Page finished loading'); } 

Που μπορεί να συντομευτεί σε:

document.body.onload = function() { alert('Page finished loading'); } 

Στο παραπάνω παράδειγμα, μόλις φορτωθεί η ιστοσελίδα, myFunctionθα καλείται η συνάρτηση, εμφανίζοντας την Page finished loadingειδοποίηση στον χρήστη.

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

Περισσότερες πληροφορίες:

Αυτά είναι μόνο δύο από τα πολλά συμβάντα DOM που μπορείτε να χειριστείτε με JavaScript, αλλά είναι από τα πιο συχνά χρησιμοποιούμενα.

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