Arts numériques

Ecrire dans le tag avec l’attribut onclick

On peut ajouter un attribut onclick sur n’importe quel élément. C’est une méthode non recommandée, car on ajoute du javascript dans du html, ce qui est considéré comme intrusif. Mais une méthode toujours utile.

<div onclick="mafonction();">Cliquez moi</div>

Associer une action à un tag en pur javascript

Ici, on va associer l’action uniquement avec javascript. Là aussi, plusieurs méthodes possibles.

Première méthode

<div id="uneaction">Cliquer ici</div>
    <script>
      document.querySelector('#uneaction').onclick= function(){
        alert("test");
      }
    </script>

On sélectionne l’élément par son id et on lui associe une fonction, codée dans la foulée.

Deuxième méthode
On peut aussi écrire cet appel de fonction avec addEventListener

<button>Cliquer ici</button>
    <script>
      var button = document.querySelector("button");
      button.addEventListener("click", function() {
        alert("button clické !");
      })
    </script>

Activer plusieurs boutons avec la même fonction

La fonction forEach permet de passer en revue tous les éléments sélectionnés avec querySelectorAll, qui comme son nom l’indique sélectionne plusieurs éléments qui correspondent à la requête, et renvoie une liste, un array, au lieu de un seul élément.
Le code suivant crée un attribut "data-style" dans le tag "body", que l’on peut styler avec les css

<button data-style="off" class="bouton">Eteint</button>
<button data-style="on" class="bouton">Allumé</button>

<script>
  document.querySelectorAll('.bouton').forEach(function(element) {
    element.onclick=function(){
      document.querySelector("body").dataset.style = this.dataset.style;
    }
  });
</script>
<style>
body {
    background-color:#000;
    color:#fff;
}
body[data-style='on'] {
    background-color:#fff;
    color:#000;
}
</style>

La propagation des clics

Le clic est un événement qui peut se propager. à‡a signifie que si un élément est cliqué, son parent est aussi averti du clic. Si il a lui-même une action codée en cas de clic, il va lui aussi s’exécuter, ce qui peut être gênant. Un autre cas typique est le clic sur un lien. Vous avez un lien en html traditionnel fonctionnel, mais vous codez une action en javascript sur ce même lien. Si vous ne stoppez pas la propagation du clic, le script va s’exécuter et dans le même temps, le lien va s’activer, et donc changer de page. Il faut donc empêcher le lien de s’exécuter.

Voici un code non-fonctionnel :

<a href="mapage.html" id="monlien">Cliquez moi</a>
    <script>
    var monaction = document.querySelector("#monlien");
     monaction.onclick=function(){
       alert("Lien clické !");
     }
    </script>

Lorsqu’on clique sur le lien, le script fait apparaitre une page d’alerte, mais dès que l’on referme celle-ci, le lien s’active et on change de page. Si le but est de rester sur la même page, on ajoutera un code empêchant la propagation.

<button>Cliquer ici</button>
    <a href="mapage.html" id="monlien">Cliquez moi</a>
    <script>
    var monaction = document.querySelector("#monlien");
     monaction.onclick=function(){
       alert("Lien clické !");
       return false; // stoppe la propagation
     }
    </script>

Autres actions

onclick n’est pas la seule action gérée par javascript. En voici d’autres :
mousedown
mouseup
mousemove
dblclick
mouseover
mouseout
mouseenter
mouseleave
contextmenu
Faite une recherche, tout ceci est abondamment documenté sur le net.