ajouter un événement en clic sur un élément

Rendre un élément de la page clickable est une des opérations de base en intéraction web. Il y a plusieurs moyens d’y arriver.

Précédent | 3/3

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>

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.