Comment ajouter un gestionnaire d'événements à un élément de JavaScript
Comment ajouter un gestionnaire d'événements à un élément de JavaScript
JavaScript fournit addEventListener () qui vous permet d'ajouter un gestionnaire d'événements à un élément HTML. Cette méthode lie un événement à un élément HTML, en outre, il ajoute un gestionnaire d'événements à un élément HTML particulier sans écraser aucun gestionnaire d'événements qui existe déjà sur cet élément.
Syntaxe
élément.AddeventListener (EventType, EventListener);
Exemple
Supposons que vous souhaitiez ajouter un gestionnaire d'événements qui lie l'événement de clic à un élément.
Dans l'exemple ci-dessus, nous créons un bouton en utilisant le morceau de code suivant.
À l'aide de la méthode AddeventListener (), nousttons un événement de clic sur le bouton.
document.getElementByid ("bouton").addEventListener ("click", functionName);fonction functionname ()
document.GetElementByid ("tutoriel").innerhtml = "Vous avez cliqué sur moi!"
Lorsque vous cliquez sur le bouton, une note apparaîtra pour vous dire que vous venez de cliquer sur le bouton. Nous avons montré la sortie ci-dessous.
En savoir plus sur les gestionnaires d'événements!
1. Il est possible d'ajouter divers gestionnaires d'événements ou divers gestionnaires d'événements du même type à un élément particulier.
Exemple
Voici un exemple d'ajout de deux événements de pression à un champ de saisie à l'aide de la méthode AddeventListener ().
Dans l'exemple ci-dessus, le morceau de code suivant ajoute deux événements de pression à un champ de saisie.
fonction FirstFunction ()Alert ("First Keypress Event s'est produit!");
fonction secondFunction ()
Alert ("Le deuxième événement de la Keypress s'est produit!");
Lorsque vous appuyez sur une touche de clavier à l'intérieur du champ de saisie, le premier événement de la touche se produira.
Après avoir cliqué sur OK dans la boîte de dialogue, la deuxième pression de Keyp se produira.
2. Les gestionnaires d'événements peuvent également être ajoutés aux objets DOM.
3. Les gestionnaires d'événements consacrent le comportement des événements sur la façon dont ceux-ci réagissent sur la bouillonnement.
4. Pour augmenter la lisibilité, JavaScript se divise à partir du balisage HTML lorsque la méthode AddEventListener () est utilisée.
5. Lors de l'utilisation de la méthode addEventListener (), vous pouvez également utiliser des événements bouillonnants ou capturant d'événements, mais il est totalement facultatif.
Dans l'événement bouillonnant l'événement de la plupart des éléments intérieurs est opéré en premier et l'événement de la plupart des éléments extérieurs plus tard. Cependant, lors de la capture de l'événement de l'élément le plus extérieur est opéré en premier et l'événement de l'élément le plus intérieur plus tard.
Syntaxe pour l'utilisation de bouillons d'événements et de capture d'événements est le suivant.
élément.AddeventListener (événement, fonction, useCapture);
Note: Dans la syntaxe ci-dessus, par défaut, la valeur du paramètre est fausse, cela signifie que la bulle d'événement se produira, mais si vous passez la valeur du paramètre comme vrai, la capture de l'événement se produira.
Exemple
Voici un exemple de propagation bouillonnante.
C'est une propagation bouillonnante.
Dans l'exemple ci-dessus, nous créons un
élément en tant qu'élément parent et élément comme élément enfant.
C'est une propagation bouillonnante.
Utilisation puis utilisée pour ajouter un événement de clic à l'aide de la méthode addEventListener () avec une propagation bouillonnante.
document.getElementByid ("Button1").addEventListener ("click", function ()alerte ("Vous avez cliqué sur le bouton!");
, FAUX);
document.GetElementByid ("para1").addEventListener ("click", function ()
alerte ("Vous avez cliqué sur le paragraphe!");
, FAUX);
Lorsque vous exécutez ce programme, puis cliquez d'abord sur le bouton, la propagation bouillonnante exploitera d'abord l'événement de clic sur le bouton (élément le plus interne) et le paragraphe (élément le plus extérieur) plus tard. Voici la sortie.
Maintenant, lorsque vous cliquez sur OK, la propagation bouillonnante effectuera un événement de clic dans le paragraphe.
En utilisant le même exemple, si vous passez la valeur du paramètre comme vrai, la propagation de la capture se produira.
C'est une propagation bouillonnante.
Si vous cliquez d'abord sur l'élément enfant (bouton), la capture de propagation fonctionnera d'abord, cliquez sur le paragraphe (élément le plus extérieur) et le bouton (élément le plus interne) plus tard. Nous avons montré la sortie ci-dessous.
Après avoir cliqué sur OK, l'événement cliquez sur l'élément.
6. Il est également possible de supprimer un gestionnaire d'événements à l'aide de la méthode devingEventListener ().
Conclusion
JavaScript fournit une méthode addEventListener () qui vous permet de lier un gestionnaire d'événements à un élément. Vous pouvez attacher divers gestionnaires d'événements du même type à un élément particulier, en outre, outre les éléments HTML, vous pouvez également ajouter des gestionnaires d'événements aux objets DOM. Vous pouvez également ajouter la propagation bouillonnante et capturer la propagation à l'aide de la méthode AddeventListener (). Cette rédaction discute en détail des approches d'ajout de gestionnaires d'événements à un élément utilisant JavaScript ainsi que des exemples appropriés.