Comment définir onclick avec javascript

Un événement est une action prise par un navigateur ou un utilisateur. Le concept JavaScript des gestionnaires d'événements ou des auditeurs peut être utilisé pour gérer ces événements. Un certain événement déclenche l'exécution d'un auditeur d'événements. L'un de ces auditeurs d'événements est «sur clic."Lorsqu'un utilisateur clique sur un élément, un écouteur d'événements OnClick est déclenché ou exécuté.

Ce tutoriel définira la procédure sur la façon de définir onClick avec JavaScript.

Comment définir onclick avec javascript

Pour définir 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énements sur l'événement HTML qui vérifie le «Cliquez sur" événement.

Exemple 1: attribuez 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 tout en cliquant dessus.

Définissez la propriété OnClick avec JavaScript

Cliquez sur moi

Dans l'étape suivante, le bouton créé sera accessible et un ««sur clic»L'attribut y sera attaché. Lors du clic du bouton, la fonction spécifiée sera exécutée et le ««style.Couleur de l'arrière plan»La propriété modifiera la couleur du bouton comme suit:

document.GetElementByid ("JS").onClick = fonction jsfunc ()
document.GetElementByid ("JS").style.backgroundColor = "violet";

La sortie correspondante sera:

Exemple 2: Ajoutez explicitement un écouteur d'événements sur l'événement HTML

Créer un bouton "Cliquez ici!"Et attribue un ID"événement«À lui qui déclenchera la méthode AddeveventListener () sur la "Cliquez sur" événement:

Cliquez ici!bouton>

Remplissez le bouton en utilisant son identifiant puis attache un "addEventListener ()«Méthode en passant un«Cliquez sur«Événement et une fonction»eventfunc«Où la couleur d'arrière-plan du bouton sera modifiée:

document.GetElementByid ("événement").AddeventListener ("cliquez", eventFunc);
fonction eventfunc ()
document.GetElementByid ("événement").style.backgroundColor = "green";

Sortir

Exemple 3: en utilisant toutes les méthodes ONClick à la fois

Dans cet exemple, le fonctionnement de toutes les méthodes sera affiché à la fois. Le premier est le moyen 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 en utilisant l'ID"événement"Puis attache un"addEventListener ()«Méthode avec lui:

Cliquez sur


Cliquez sur moi


Cliquez ici!

La fonction ci-dessous déclenchera le «sur clic"Événement du bouton"Cliquez sur»:

fonction htmlfunc ()
alert ("le bouton cliqué par l'événement HTML OnClick");

En cliquant sur le «Cliquez sur moi”Bouton, la fonction suivante déclenchera où un message d'avertissement sera affiché.

document.GetElementByid ("JS").onClick = fonction jsfunc ()
alert ("le bouton cliqué par la fonction JavaScript onClick");

La fonction donnée déclenchera le bouton "Cliquez ici!»:

document.GetElementByid ("événement").AddeventListener ("cliquez", eventFunc);
fonction eventfunc ()
alert ("le bouton cliqué par JavaScript onClick avec la méthode EventListener");

La sortie affichera les messages d'alerte sur chaque bouton CLIC:

Conclusion

Pour définir le 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 deuxième approche consiste à ajouter explicitement un écouteur d'événements sur l'événement HTML qui vérifie le "Cliquez sur" événement. Ce tutoriel a défini les méthodes pour définir ONClick avec JavaScript ainsi que des exemples.