Événement JavaScript Onclick expliqué

L' onclickévénement en JavaScript vous permet, en tant que programmeur, d'exécuter une fonction lorsqu'un élément est cliqué.

Exemple de bouton Onclick

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

Dans l'exemple simple ci-dessus, lorsqu'un utilisateur clique sur le bouton, une alerte s'affiche dans son navigateur Button was clicked!.

Ajouter onclick dynamiquement

L' onclickévénement peut également être ajouté par programme à n'importe quel élément à l'aide du code suivant dans l'exemple suivant:

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

Remarque

Il est important de noter qu'en utilisant onclick, nous ne pouvons ajouter qu'une seule fonction d'écoute. Si vous voulez en ajouter plus, utilisez simplement addEventListener (), qui est le moyen préféré pour ajouter un écouteur d'événements.

Dans l'exemple ci-dessus, lorsqu'un utilisateur clique sur l' paragraphélément dans le html, il verra apparaître une alerte onclick Event triggered.

Empêcher l'action par défaut

Cependant, si nous nous attachons onclickà des liens (balise HTML a), nous pourrions vouloir empêcher l'action par défaut de se produire:

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

Dans l'exemple ci-dessus, nous avons empêché le comportement par défaut de l' aélément (lien d'ouverture) en utilisant event.preventDefault()notre onclickfonction de rappel.

MDN

Autres ressources

jQuery .on () Attachement du gestionnaire d'événements