Ce tutoriel définira la procédure à suivre pour définir onClick avec JavaScript.
Comment définir onClick avec JavaScript
Pour régler le sur clic avec JavaScript, il existe deux méthodes différentes, qui sont :
- La première méthode consiste à attribuer une valeur à l'élément HTML sur clic attribut à l'aide de JavaScript.
- La deuxième méthode consiste à ajouter explicitement un écouteur d'événement sur l'événement HTML qui vérifie le ' Cliquez sur ' un événement.
Exemple 1 : Attribuer une valeur à l'attribut onclick de l'élément HTML à l'aide de JavaScript
Dans le fichier HTML, créez un titre et un bouton ' Cliquez sur moi ' avec l'identifiant ' js ” qui déclenchera la fonction JavaScript en cliquant dessus.
< h2 > Régler propriété onClick avec JavaScript h2 >
< identifiant du bouton = 'js' > Cliquez sur moi bouton >
Dans l'étape suivante, le bouton créé sera accessible et un ' sur clic ” l'attribut lui sera attaché. Lors du clic sur le bouton, la fonction spécifiée sera exécutée et le ' style.backgroundColor ” changera la couleur du bouton comme suit :
document. getElementById ( 'js' ) . sur clic = fonction jsFunc ( ) {
document. getElementById ( 'js' ) . style . Couleur de l'arrière plan = 'Violet' ;
}
La sortie correspondante sera :
Exemple 2 : ajouter explicitement un écouteur d'événement sur l'événement HTML
Créer un bouton ' Cliquez ici! ' et attribue un identifiant ' un événement ” qui déclenchera la méthode addEventListener() sur le 'Cliquez sur' un événement:
< identifiant du bouton = 'un événement' > Cliquez ici ! fort > bouton fort >>
Récupérez le bouton à l'aide de son identifiant puis joignez un ' addEventListener() ” méthode en passant un “ Cliquez sur 'un événement et une fonction' eventFunc ” où la couleur de fond du bouton sera modifiée :
document. getElementById ( 'un événement' ) . addEventListener ( 'Cliquez sur' , fonctionEvénement ) ;fonction eventFunc ( ) {
document. getElementById ( 'un événement' ) . style . Couleur de l'arrière plan = 'Vert' ;
}
Production
Exemple 3 : Utilisation simultanée de toutes les méthodes onClick
Dans cet exemple, le fonctionnement de toutes les méthodes sera affiché en même temps. La première est la manière par défaut d'ajouter l'attribut onclick dans la balise HTML elle-même. Après cela, les deux méthodes de définition de l'attribut onclick à l'aide de JavaScript ont également été démontrées.
Dans l'exemple suivant, créez trois boutons et voyez la fonctionnalité de l'attribut onclick.
- Le premier bouton ' Cliquez sur » appellera le « htmlFunc() ” sur l'événement de clic.
- Le bouton ' Cliquez sur moi ' sera accessible avec son identifiant attribué ' js ', puis attribuez une valeur à l'attribut onclick du bouton à l'aide de JavaScript.
- Le bouton ' Cliquez ici! ' sera accessible à l'aide de l'identifiant ' un événement » puis joignez un « addEventListener() ” méthode avec elle:
< identifiant du bouton = 'js' > Cliquez sur moi bouton >< Br >< Br >
< identifiant du bouton = 'un événement' > Cliquez ici ! bouton >
La fonction ci-dessous déclenchera le ' sur clic « événement du bouton » Cliquez sur ” :
fonction htmlFunc ( ) {alerte ( 'Le bouton cliqué par l'événement HTML onClick' ) ;
}
En cliquant sur le ' Cliquez sur moi », la fonction suivante se déclenchera et un message d'avertissement s'affichera.
document. getElementById ( 'js' ) . sur clic = fonction jsFunc ( ) {alerte ( 'Le bouton cliqué par la fonction JavaScript onClick' ) ;
}
La fonction donnée déclenchera le bouton ' Cliquez ici! ” :
document. getElementById ( 'un événement' ) . addEventListener ( 'Cliquez sur' , fonctionEvénement ) ;fonction eventFunc ( ) {
alerte ( 'Le bouton cliqué par JavaScript onClick avec la méthode EventListener' ) ;
}
La sortie affichera des messages d'alerte à chaque clic de bouton :
Conclusion
Pour définir onclick avec JavaScript, il existe deux approches différentes, la première consiste à attribuer une valeur à l'attribut onclick de l'élément HTML à l'aide de JavaScript et la seconde approche consiste à ajouter explicitement un écouteur d'événement sur l'événement HTML qui vérifie le ' Cliquez sur ' un événement. Ce tutoriel a défini les méthodes pour définir onClick avec JavaScript avec des exemples.