Le sur clic L'événement se produit généralement lorsque l'utilisateur clique sur un élément. Il permet au programmeur d'exécuter une fonction JavaScript lorsqu'un élément est cliqué. Cet événement peut être utilisé pour valider un formulaire, des messages d'avertissement et bien d'autres.
Grâce à JavaScript, cet événement peut être ajouté dynamiquement à n'importe quel élément. Il prend en charge tous les éléments HTML sauf , , , , , , , ,
, , et . Cela signifie que nous ne pouvons pas appliquer le sur clic événement sur les balises données.
En HTML, on peut utiliser le sur clic attribuer et attribuer un Fonction JavaScript à cela. Nous pouvons également utiliser le JavaScript addEventListener() méthode et passer un Cliquez sur événement pour une plus grande flexibilité.
Syntaxe
Voyons maintenant la syntaxe d'utilisation du sur clic événement en HTML et en javascript (sans addEventListener() méthode ou en utilisant la addEventListener() méthode).
En HTML
En Javascript
object.onclick = function() { myScript }; En JavaScript en utilisant la méthode addEventListener()
object.addEventListener('click', myScript);
Voyons comment utiliser sur clic événement en utilisant quelques illustrations. Nous allons maintenant voir les exemples d'utilisation de sur clic événement en HTML et en JavaScript.
chaînes en c
Exemple 1 - Utilisation de l'attribut onclick en HTML
Dans cet exemple, nous utilisons le HTML sur clic attribut et en lui attribuant une fonction JavaScript. Lorsque l'utilisateur clique sur le bouton donné, la fonction correspondante sera exécutée et une boîte de dialogue d'alerte s'affichera à l'écran.
function fun() { alert('Welcome to the javaTpoint.com'); } <h3> This is an example of using onclick attribute in HTML. </h3> <p> Click the following button to see the effect. </p> Click me Testez-le maintenant Sortir
Après avoir cliqué sur le bouton donné, la sortie sera -
Exemple 2 - Utilisation de JavaScript
Dans cet exemple, nous utilisons JavaScript sur clic événement. Nous utilisons ici le sur clic événement avec l’élément paragraphe.
Lorsque l'utilisateur clique sur l'élément de paragraphe, la fonction correspondante sera exécutée et le texte du paragraphe sera modifié. En cliquant sur le élément, la couleur d'arrière-plan, la taille, la bordure et la couleur du texte seront également modifiées.
onclick event <h3> This is an example of using onclick event. </h3> <p> Click the following text to see the effect. </p> <p id="para">Click me</p> document.getElementById('para').onclick = function() { fun() }; function fun() { document.getElementById('para').innerHTML = 'Welcome to the javaTpoint.com'; document.getElementById('para').style.color = 'blue'; document.getElementById('para').style.backgroundColor = 'yellow'; document.getElementById('para').style.fontSize = '25px'; document.getElementById('para').style.border = '4px solid red'; } Testez-le maintenant Sortir
Après avoir cliqué sur le texte Cliquez sur moi, la sortie sera -
Exemple 3 - Utilisation de la méthode addEventListener()
Dans cet exemple, nous utilisons JavaScript addEventListener() méthode pour joindre un Cliquez sur événement à l’élément paragraphe. Lorsque l'utilisateur clique sur l'élément de paragraphe, le texte du paragraphe est modifié.
En cliquant sur le paragraphe, la couleur d'arrière-plan et la taille de la police des éléments changeront également.
<h3> This is an example of using click event. </h3> <p> Click the following text to see the effect. </p> <p id="para">Click me</p> document.getElementById('para').onclick = function() { fun() }; function fun() { document.getElementById('para').innerHTML = 'Welcome to the javaTpoint.com'; document.getElementsByTagName('body')[0].style.color = 'blue'; document.getElementsByTagName('body')[0].style.backgroundColor = 'lightgreen'; document.getElementsByTagName('body')[0].style.fontSize = '25px'; document.getElementById('para').style.border = '4px solid red'; } Testez-le maintenant Sortir
bfs contre dfs
En cliquant sur le texte Cliquez-moi , le résultat sera -
