Comment ajouter un gestionnaire d'événements à l'objet Window en JavaScript

Votre fenêtre de navigateur créé automatiquement est connu sous le nom de objet de fenêtre. Il est considéré comme l'objet du navigateur, pas de Javascrip. Si vous lisez cet article dans votre navigateur préféré, l'onglet actuel représente l'objet Window. L'objet de fenêtre peut utiliser la largeur, la hauteur des fenêtres, les alertes et les invites.

Avec l'aide du addEventListener () Méthode, un programmeur JavaScript peut ajouter gestionnaires d'événements à un objet de fenêtre spécifique. Cette méthode vous permet de contrôler la réaction de l'événement correspondant. Le JavaScript est isolé du texte HTML lorsque vous utilisez la méthode AddEventListener (), ce qui facilite la compréhension et vous permettant d'ajouter des écouteurs d'événements même si vous n'avez pas de contrôle sur le balisage HTML.

Cette rédaction discutera de la procédure d'ajout de gestionnaires d'événements à l'objet Window dans un programme JavaScript. De plus, les exemples liés à l'utilisation de la méthode AddeventListener () seront également démontrés. Alors, commençons!

Ajout de gestionnaires d'événements à l'objet Window en JavaScript

En tant que programmeur JavaScript, vous pouvez utiliser la méthode AddeveventListener () pour ajouter un écouteur d'événements à n'importe quel objet HTML. Il existe un autre "sur»Propriété JavaScript utilisée dans le même but; Cependant, il n'est pas très utile par rapport à la méthode addeventListener () car la méthode AddEventListener () vous permet d'ajouter plusieurs écouteurs d'événements sur un objet Windows ou un élément HTML.

Syntaxe de la méthode addEventListener ()

objet.AddeventListener (événement, fonction, useCapture);

Ici, le premier paramètre, "événement"Est ajouté pour spécifier l'événement pour lequel vous souhaitez ajouter le gestionnaire d'événements; le deuxième paramètre, "fonction»Invoque la fonction qui sera exécutée lorsque l'événement spécifié se produit. Le dernier paramètre est facultatif, ce qui peut être la capture ou la bouillonnement des événements.

Exemple 1: Ajout d'un gestionnaire d'événements à l'objet Window en JavaScript

Nous ajouterons la méthode AddeventListener () au «fenêtre”Objet dans l'exemple suivant. La méthode AddEventListener () ajoutée sera déclenchée lorsqu'un utilisateur effectue le "souris vers le bas" action:

JavaScript addEventListener ()

Cet exemple utilise la méthode addEventListener () sur l'objet Window.

Nous pouvons également passer un «événement”Objet à la méthode addEventListener (). Le "événement»L'objet comprend toutes les informations relatives à l'événement Mousedown:

Exécutez le programme donné ci-dessus dans votre éditeur de code préféré ou tout autre bac à sable codant en ligne; Cependant, nous utiliserons le JSBIN à cet effet:

L'exécution du programme JavaScript ci-dessus affichera la sortie suivante:

Maintenant, cliquez à gauche sur l'écran et vous verrez l'alerte suivante:

Exemple 2: Ajout d'un gestionnaire d'événements pour l'événement de clic de souris dans JavaScript

Cet exemple vous montrera la procédure d'ajout d'un gestionnaire d'événements pour la souris "Cliquez sur”Événement en javascript. Dans cet exemple, nous n'ajoutons pas d'événement directement à l'objet Window mais à son objet de document.

Tout d'abord, nous ajouterons une rubrique avec le

Tag, un paragraphe avec le

Tag, et un bouton en utilisant la balise:

Ajouter un gestionnaire d'événements en javascript

Ce programme JavaScript a utilisé AddEventListener ()

Nous avons également ajouté un ID "Button1" pour notre "Cliquez sur moi" bouton:

> Cliquez sur moi

La méthode GetElementByid sera invoquée pour trouver et obtenir le bouton en ayant «Button1" identifiant. Après cela, le «addEventListener ()"La méthode ajoutera un"Cliquez sur”Événement qui déclenchera le"DisplayDate ()" méthode:

Après avoir obtenu la sortie, cliquez sur le "Cliquez sur moi”Bouton pour vérifier l'heure et la date actuelles:

Conclusion

À l'aide de la méthode AddeventListener (), vous pouvez ajouter un gestionnaire d'événements à l'objet de fenêtre et aux éléments HTML. Sans écraser les gestionnaires d'événements existants, la méthode JavaScript AddeventListener () attribue un gestionnaire d'événements à l'objet spécifique et un objet de fenêtre unique peut également avoir plusieurs gestionnaires d'événements. Cet article a discuté de la procédure pour ajouter des gestionnaires d'événements à l'objet Window dans un programme JavaScript et les exemples liés à l'utilisation de la méthode AddeventListener () sont également démontrés.