Les boutons sont l'un des éléments les plus interactifs sur une page web. En JavaScript, on peut écouter plusieurs types d'événements pour réagir aux actions de l'utilisateur. Nous allons voir lesquels et comment les implémenter efficacement.

Les événements courants sur un bouton

🖱️ Le clic et le double-clic

Déclenché lorsqu'un utilisateur clique avec sa souris.

const bouton = document.getElementById("btn");

bouton.addEventListener("click", () => {
    alert("Bouton cliqué !")
})

Moins utilisé, le double-clic peut être utile pour des actions avancées, notamment dans les jeux vidéo.

bouton.addEventListener("dblclick", () => {
    alert("Bouton double-cliqué !")
})

Le survol avec mouseover et mouseout

Ces deux événements permettent de déclencher une action lorsque l'utilisateur passe la souris sur un bouton ou la quitte. Ici il est utilisé pour appliquer un style.

bouton.addEventListener("mouseover", () => {
    bouton.style.backgroundColor = "#d6bba7"
    bouton.style.color = "#663713"
})

bouton.addEventListener("mouseout", () => {
    bouton.style.backgroundColor = "#663713"
    bouton.style.color = "white"
})

Le maintien avec mousedown et mouseup

Plus précis et moins utilisés que les événements précédents, mousedown et mouseup amorcent des actions lorsque l'utilisateur appuie (souvent utilisé pour différencier un simple clic vs un appui prolongé et déclencher des actions différentes) ou relâche le bouton.

bouton.addEventListener("mousedown", () => {
    console.log("Bouton pressé")
})

bouton.addEventListener("mouseup", () => {
    console.log("Bouton relâché");
})

L'entrée et la sortie du focus avec focus et blur

Souvent utilisés pour les jeux vidéos ou par des personnes à l'accessibilité réduite, ces événements sont utiles pour détecter quand un bouton reçoit ou perd le focus clavier.

bouton.addEventListener("focus", () => {
    bouton.style.borderRadius = "50px"
})

bouton.addEventListener("blur", () => {
    bouton.style.borderRadius = "15px"
})

Accessibilité et bonnes pratiques

L'accessibilité est essentielle pour assurer une bonne expérience utilisateur, notamment pour ceux qui utilisent des technologies d'assistance. Voici quelques conseils supplémentaires pour rendre vos boutons accessibles

• Utiliser keydown et keyup pour permettre l'activation via le clavier :

bouton.addEventListener("keydown", (event) => {
    if (event.key === "Enter" || event.key === " ") {
        bouton.click()
    }
})

• Ajouter un attribut aria-label ou aria-labelledby est recommandé si le bouton n'a pas de texte visible afin que les utilisateurs de lecteurs d'écran puissent comprendre l'action du bouton.

<button id="btn" aria-label="Envoyer le formulaire">📩</button>

• Vérifier que les événements souris sont aussi accessibles au clavier en couplant par exemple les effets mouseover/mouseout avec focus/blur.
• Ne pas supprimer le focus par défaut mais l'améliorer visuellement pour aider les utilisateurs à voir quel bouton est actif.

Aller plus loin

• Gérer les événements de manière déléguée pour optimiser les performances, surtout lorsqu'on manipule un grand nombre d'éléments interactifs.

document.getElementById("container").addEventListener("click", (event) => {
    if (event.target.matches(".btn")) {
        alert("Bouton cliqué !")
    }
})

• Utiliser les événements tactiles touchstart et touchend pour rendre les boutons compatibles sur mobile.
• Explorer l'intégration en React.

Et Voilà !

⭐ Bonus

⭐ Fiche récapitulative des événements des boutons en JavaScript:
      Télécharger la cheatsheet PDF

⭐ CodePen lié à l'article:
      CodePen: Apprendre les écouteurs d'événement en Javascript

series: "Comprendre les événements en JavaScript"