JavaScript onClick permet de gérer un « évènement ». Les évènements sont au cœur du langage JavaScript : ils permettent d'ajouter de l'interactivité et du dynamisme à un site web. JavaScript onClick gère un évènement de type souris : l'évènement « click ». Quand un internaute clique avec sa souris sur un élément cliquable d'un site web, tel qu'un bouton, il se produit quelque chose : un message ou une boîte de dialogue s'affiche, par exemple. Cela s'est passé en deux temps : le clic a été détecté, une réaction s'est produite.
Formulaires, menus déroulants, flèches de défilement, QCM ou encore boutons de redirection : un évènement click se trouve souvent derrière ces éléments incontournables, pour une bonne UX. JavaScript onClick est une méthode parmi d'autres pour gérer cet évènement.
Qu'est-ce que JavaScript onClick ?
JavaScript onClick est une méthode pour gérer un évènement click. Elle sert à produire une réaction quand un internaute clique sur un élément d'une page web. Elle utilise du code HTML : il faut ajouter l'attribut onclick à l'élément HTML. La méthode addEventListener, recommandée, utilise du code JavaScript.
Quel est le rôle de l'évènement onClick ?
Le rôle du onClick est d'apporter du dynamisme et de l'interactivité à une page web. Site vitrine, blog ou e-commerce : quel que soit l'objet du site web, les internautes s'attendent à un certain niveau d'interaction. Quand un internaute remplit et valide un formulaire de contact, par exemple, il apprécie sans doute être remercié : onClick permet d'afficher un message de remerciement. De même, un bouton de retour en haut de page améliore l'UX sur les longues pages web : le bouton peut être programmé avec la méthode onClick.
Fonctionnement du JavaScript onClick
Pour fonctionner, JavaScript onClick a besoin d'un élément HTML. Quand un internaute clique sur cet élément, une réaction se produit.
JavaScript onClick fonctionne sur de nombreux éléments HTML. Exemples :
- Des boutons, codés avec l'élément <button>.
- Des titres de tous niveaux, <h2> et <h3> par exemple.
- Du texte dans un paragraphe <p> </p>.
- Un élément de menu déroulant, pour afficher un sous-menu.
- Un bouton radio dans un formulaire.
- Une image, un pictogramme, une icône.
JavaScript onClick peut déclencher diverses réactions. Exemples :
- Afficher un message d'erreur ou de remerciement, dans une fenêtre pop-up.
- Afficher un message directement dans la page web, la date du jour par exemple.
- Modifier l'aspect de l'élément cliqué ou d'un autre élément de la page : changement de couleur du texte, par exemple.
- Rediriger l'internaute vers une autre page du site web, vers un autre site web ou à un autre emplacement de la page visitée. Exemple : l'internaute qui arrive en bas d'une page web clique sur une flèche pour remonter tout en-haut de la page.
- Ouvrir un menu déroulant.
- Valider un formulaire : les données renseignées dans les champs sont enregistrées et transmises.
Comment faire un onClick JavaScript ?
Pour faire un onClick avec JavaScript, il faut :
- Créer un élément HTML.
- Ajouter un attribut HTML onClick à l'intérieur de la balise de l'élément.
Pour créer un bouton qui affiche « Bravo ! » dans une fenêtre pop-up quand l'utilisateur clique, par exemple, il faut écrire :
<button onclick="alert(‘Bravo !')">Cliquez</button>.
Cette méthode, basée exclusivement sur le code HTML, est la plus ancienne. La méthode addEventListener est plus performante et plus flexible : c'est la méthode recommandée pour gérer un évènement click.
Pour utiliser la méthode addEventListener, il faut :
- Dans le fichier HTML : créer un élément HTML.
- Dans le fichier JavaScript : sélectionner l'élément HTML, et lui ajouter un évènement click.
Dans l'exemple précédent, la méthode addEventListener est codée ainsi :
See the Pen javascript-onclick_addeventlistener by HubSpot France (@HubSpot-France) on CodePen.
Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l'outil CMS de HubSpot.
JavaScript onClick : comment faire ?
GUIDE ET MODÈLE GRATUITS : MAÎTRISER LES REGEX
Utilisez les regex de façon optimale pour rechercher des informations ou bien automatiser certaines opérations.
Télécharger gratuitementMis à jour :
Publié :
JavaScript onClick permet de gérer un « évènement ». Les évènements sont au cœur du langage JavaScript : ils permettent d'ajouter de l'interactivité et du dynamisme à un site web. JavaScript onClick gère un évènement de type souris : l'évènement « click ». Quand un internaute clique avec sa souris sur un élément cliquable d'un site web, tel qu'un bouton, il se produit quelque chose : un message ou une boîte de dialogue s'affiche, par exemple. Cela s'est passé en deux temps : le clic a été détecté, une réaction s'est produite.
Formulaires, menus déroulants, flèches de défilement, QCM ou encore boutons de redirection : un évènement click se trouve souvent derrière ces éléments incontournables, pour une bonne UX. JavaScript onClick est une méthode parmi d'autres pour gérer cet évènement.
Qu'est-ce que JavaScript onClick ?
JavaScript onClick est une méthode pour gérer un évènement click. Elle sert à produire une réaction quand un internaute clique sur un élément d'une page web. Elle utilise du code HTML : il faut ajouter l'attribut onclick à l'élément HTML. La méthode addEventListener, recommandée, utilise du code JavaScript.
Quel est le rôle de l'évènement onClick ?
Le rôle du onClick est d'apporter du dynamisme et de l'interactivité à une page web. Site vitrine, blog ou e-commerce : quel que soit l'objet du site web, les internautes s'attendent à un certain niveau d'interaction. Quand un internaute remplit et valide un formulaire de contact, par exemple, il apprécie sans doute être remercié : onClick permet d'afficher un message de remerciement. De même, un bouton de retour en haut de page améliore l'UX sur les longues pages web : le bouton peut être programmé avec la méthode onClick.
Fonctionnement du JavaScript onClick
Pour fonctionner, JavaScript onClick a besoin d'un élément HTML. Quand un internaute clique sur cet élément, une réaction se produit.
JavaScript onClick fonctionne sur de nombreux éléments HTML. Exemples :
JavaScript onClick peut déclencher diverses réactions. Exemples :
Comment faire un onClick JavaScript ?
Pour faire un onClick avec JavaScript, il faut :
Pour créer un bouton qui affiche « Bravo ! » dans une fenêtre pop-up quand l'utilisateur clique, par exemple, il faut écrire :
<button onclick="alert(‘Bravo !')">Cliquez</button>.
Cette méthode, basée exclusivement sur le code HTML, est la plus ancienne. La méthode addEventListener est plus performante et plus flexible : c'est la méthode recommandée pour gérer un évènement click.
Pour utiliser la méthode addEventListener, il faut :
Dans l'exemple précédent, la méthode addEventListener est codée ainsi :
See the Pen javascript-onclick_addeventlistener by HubSpot France (@HubSpot-France) on CodePen.
Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l'outil CMS de HubSpot.
Partager cet article sur les réseaux sociaux
Articles recommandés
Comment faire un pop-up en JavaScript : guide et exemples
Fichier JSON : qu'est-ce que c'est et comment l'utiliser ?
Comment afficher la date en JavaScript ?
SSR (rendu côté serveur) vs CSR (rendu côté client) : lequel choisir pour son site web ?
Comprendre le JavaScript et ses fonctionnalités
Apprendre le JavaScript : par où commencer ? 6 ressources à connaître
Array Javascript : tout comprendre sur la notion de tableau en JavaScript
Comment insérer et gérer des images avec JavaScript ?
Framework et bibliothèque JavaScript : définitions et différences