addEventListener vs onclick en javascript
Lors de la création de pages Web pour un site Web, il peut être nécessaire de placer des fonctionnalités supplémentaires pour des fonctionnalités améliorées. Par exemple, dans le cas des tests d'automatisation, vérifiez le fonctionnement de diverses fonctionnalités sur le déclencheur de l'événement. Dans de tels cas, JavaScript fournit deux techniques importantes qui aident à rendre une conception globale de document accessible nommée AddeventListener () et l'événement OnClick.
Ce manuel comparera théoriquement et pratiquement le AddeventListener et l'événement OnClick.
addEventListener vs onclick en javascript
En JavaScript, le «addEventListener ()"Méthode et le"sur clic”L'événement fonctionne à la fois pour un événement et peut exécuter une fonction de rappel lorsqu'un bouton est cliqué. Cependant, ils ne sont pas complètement les mêmes.
La méthode AdveventListener () comprend un événement dans son argument. De plus, il peut appliquer plusieurs gestionnaires d'événements sur le même élément et n'écraser pas simultanément les gestionnaires d'événements. Tandis que l'événement OnClick est déclenché lorsque l'utilisateur clique sur le bouton correspondant par rapport à l'événement. Il s'agit juste d'une propriété de l'objet htmlelement et peut être écrasé, contrairement à la méthode AddeventListener ().
Syntaxe
élément.AddeventListener (événement, auditeur, UseCapture);Dans la syntaxe donnée, "événement»Fait référence à l'événement spécifié,"auditeur«Est la fonction qui sera invoquée et«user"Est la valeur facultative.
Syntaxe
Html
Dans la syntaxe donnée, "élément"Indique l'élément avec lequel le"sur clic»L'événement sera associé. Ici, "myscript»Fait référence à la fonction qui sera appelée sur laquelle l'événement OnClick se produira.
Javascrip
objet.onClick = function () myscript;De même, dans la syntaxe ci-dessus, «objet”Fait référence à l'objet associé à l'événement OnClick.
Différences de base entre AddeventListener et événement OnClick
| addEventListener | sur clic |
| La méthode addEventListener ne peut être ajoutée qu'en javascript. | OnClick peut être inclus dans HTML ainsi qu'en JavaScript. |
| AddeventListener ne fonctionne pas dans les anciennes versions de certains navigateurs. | OnClick est compatible avec tous les navigateurs. |
| Cette fonction peut attacher plusieurs événements à un élément particulier. | Cet événement associe un seul événement à un élément. |
| Il ne peut pas lier les fichiers HTML et JavaScript. | L'événement OnClick peut connecter les fonctionnalités de HTML et JavaScript. |
Maintenant, passons par les exemples suivants pour comprendre clairement la différence déclarée.
Exemple: la méthode addEventListener () pour détecter si la touche particulière est enfoncée
Dans cet exemple particulier, appliquez le «document.addEventListener ()"Méthode et joindre un événement nommé"touche Bas"Dans son argument. Cela se traduira par la notification de l'utilisateur via une alerte lorsque le «Entrer»La touche est enfoncée:
document.addEventListener ("keydown", (e) =>si (e.key == "Entrée")
alert ("Entrer la touche est enfoncé")
);
La sortie correspondante sera:
Exemple: événement OnClick pour modifier la couleur du bouton
Dans l'exemple suivant, nous créerons un bouton ayant le "bouton" identifiant. Ensuite, incluez un «sur clic»Événement qui invoquera la fonction ButtonColor () sur le bouton CLIC:
Maintenant, définissez une fonction nommée «Couleur du bouton()". Dans la définition de la fonction, accédez au bouton à l'aide du «document.geelementByid ()" méthode. Aussi, appliquez le style.propriété BackgroundColor afin de définir la couleur du bouton et de lui attribuer un code de couleur RVB comme arrière-plan:
fonction ButtonColor ()document.getElementByid ("bouton").style.backgroundColor = '# 911';
Sortir
Exemple: événement OnClick pour modifier la couleur du bouton à l'aide de JavaScript
L'exemple ci-dessus peut être appliqué en ajoutant le «sur clic”Événement dans le code JavaScript. Pour ce faire, tout d'abord, créez un bouton en utilisant le "" étiqueter:
Maintenant, récupérez le bouton créé à l'aide du "document.getElementByid ()«Méthode et appliquez le«sur clic”Événement dessus. Maintenant, répétez toutes les étapes supplémentaires pour modifier la couleur du bouton:
Let Button = document.getElementByid ("bouton")bouton.onClick = function boutoncolor ()
document.getElementByid ("bouton").style.backgroundColor = '# 911';
Cela entraînera la même sortie:
Nous avons discuté des différences entre addEventListener et onclick en javascript.
Conclusion
La principale différence entre la fonction AddeventListener et l'événement OnClick est qu'AdveventListener peut attacher plusieurs événements à un seul élément HTML, tandis que l'événement OnClick ne peut associer l'événement Click qu'avec un bouton. De plus, addEventListener ne peut être utilisé qu'avec le code JavaScript, et l'événement ONClick fonctionne dans les fichiers HTML et JavaScript. Ce manuel a guidé sur la méthode AdventListener et l'événement OnClick à la fois théoriquement et pratiquement.