Επεξήγηση συμβάντος Onclick JavaScript

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

Παράδειγμα κουμπιού Onclick

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

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

Δυναμική προσθήκη onclick

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

click on this element.
  var 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  function myAlert(event) { event.preventDefault(); alert("Link was clicked but page was not open"); } 

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

MDN

Άλλοι πόροι

jQuery .on () Συνημμένο χειριστή συμβάντων