JavaScript Onclick-Ereignis erklärt

Mit dem onclickEreignis in JavaScript können Sie als Programmierer eine Funktion ausführen, wenn auf ein Element geklickt wird.

Button Onclick Beispiel

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

Wenn ein Benutzer im obigen einfachen Beispiel auf die Schaltfläche klickt, wird in seinem Browser eine Warnung angezeigt Button was clicked!.

Dynamisches Hinzufügen von onclick

Das onclickEreignis kann auch programmgesteuert zu jedem Element hinzugefügt werden, indem der folgende Code im folgenden Beispiel verwendet wird:

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!"); }

Hinweis

Es ist wichtig zu beachten, dass wir mit onclick nur eine Listener-Funktion hinzufügen können. Wenn Sie weitere hinzufügen möchten, verwenden Sie einfach addEventListener (). Dies ist die bevorzugte Methode zum Hinzufügen eines Ereignis-Listeners.

Wenn ein Benutzer im obigen Beispiel auf das paragraphElement in klickt html, wird eine Warnung angezeigt onclick Event triggered.

Standardaktion verhindern

Wenn wir onclickjedoch Links (HTML- aTag) anhängen , möchten wir möglicherweise verhindern, dass Standardaktionen ausgeführt werden:

Guides  function myAlert(event) { event.preventDefault(); alert("Link was clicked but page was not open"); } 

Im obigen Beispiel haben wir das Standardverhalten des aElements (öffnender Link) mithilfe event.preventDefault()unserer onclickRückruffunktion verhindert.

MDN

Andere Ressourcen

jQuery .on () Event Handler-Anhang