HTML attribut d'événement onclik

Définition et utilisation événement onclick

LES BALISES HTML

Lorsqu’on manipule le bouton de la souris on crée une série d’événement et qui sont dans l’ordre :
on appuis sur le bouton
puis on le relâche
ce qui crée un clique.
Donc ces trois événement sont toujours liés mais on peut faire appelle à l’un ou l’autre de ces événements pour exécuter un script donné.
L’attribut d'événement onclick est déclenché quand un utilisateur clique sur le bouton de la souris au dessus de l'élément.
astuce Astuce : L'ordre des événements liés à l'événement onmousedown (pour le bouton gauche/milieu de la souris) :
OnMouseDown
OnMouseUp
OnClick
Remarque : L'attribut onclick ne peut pas être utilisé avec les éléments : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, ou <title>.
Syntaxe

<div onclick="script" />
Valeurs d'attribut

Valeur	Description
script	Le script à exécuter sur onclick

Exemple Exécuter un JavaScript lorsque l'utilisateur clique sur un bouton de la souris:

Exemple : 📋 Copier le code

  <!DOCTYPE html>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>HTML demo</title>
  <script>
  function copierText(){
  document.getElementById("Champs2").value= document.getElementById("Champs1").value;
  }
  </script>
  </head>
  <body>
  Champs1: <input type="text" id="Champs1" value= "Bonjour le monde!"><br>
  Champs2: <input type="text" id="Champs2">
  <br><br>
  <button onclick="copierText()">Copier Texte</button>
  <p>Une fonction est déclenchée lorsque le bouton est cliqué. La fonction copie
  le texte de Champs1 en Champs2.</p>
  </body>
  </html>