Maison  >  Article  >  interface Web  >  Comment écrire un événement onclick en js

Comment écrire un événement onclick en js

下次还敢
下次还敢original
2024-05-06 14:42:14813parcourir

L'événement

onclick est un gestionnaire d'événements en JavaScript utilisé pour spécifier le code à exécuter lorsqu'un élément est cliqué. Les étapes sont les suivantes : 1. Sélectionnez l'élément, 2. Définissez l'attribut onclick, 3. Définissez la fonction. Les actions que vous pouvez effectuer à l'aide de l'événement onclick incluent la modification des styles, le déclenchement de la navigation, l'ouverture de fenêtres modales, la validation de formulaires et la soumission de données.

Comment écrire un événement onclick en js

Comment écrire un événement onclick en JavaScript

L'événement onclick est un gestionnaire d'événements important en JavaScript qui nous permet de spécifier le code à exécuter lorsqu'un élément est cliqué.

Syntaxe :

<code>element.onclick = function() {
  // 执行代码
};</code>

Étapes :

  1. Sélectionner des éléments : Utilisez un sélecteur JavaScript pour sélectionner l'élément auquel vous souhaitez ajouter un gestionnaire d'événements.
  2. Définissez l'attribut onclick : Définissez l'attribut onclick pour l'élément sélectionné. La valeur de cet attribut est une fonction qui sera exécutée lorsque l'élément sera cliqué.
  3. Définir la fonction : Dans la fonction onclick, définissez le code que vous souhaitez exécuter lorsque l'on clique sur l'élément.

Exemple :

Dans l'exemple ci-dessous, nous allons créer un bouton et ajouter un gestionnaire d'événements onclick qui changera la couleur d'arrière-plan de la page lorsque vous cliquez sur le bouton :

<code><button id="myButton">点击我</button>

<script>
  const button = document.getElementById("myButton");

  button.onclick = function() {
    document.body.style.backgroundColor = "blue";
  };
</script></code>

Autres utilisations :

In En plus de changer de style, l'événement onclick peut être utilisé pour :

  • Déclencher la navigation
  • Ouvrir une fenêtre modale
  • Valider le formulaire
  • Soumettre les données

Remarque :

  • Assurez-vous de le citer dans le Fichier JavaScript balise