logo

TechCodeview

JavaScript addEventListener()

Le addEventListener() La méthode est utilisée pour attacher un gestionnaire d’événements à un élément particulier. Il ne remplace pas les gestionnaires d'événements existants. Les événements seraient une partie essentielle du JavaScript. Une page Web répond en fonction de l'événement survenu. Les événements peuvent être générés par l'utilisateur ou générés par des API. Un écouteur d'événement est une procédure JavaScript qui attend l'occurrence d'un événement.

La méthode addEventListener() est une fonction intégrée de Javascript . Nous pouvons ajouter plusieurs gestionnaires d'événements à un élément particulier sans écraser les gestionnaires d'événements existants.

Syntaxe

 element.addEventListener(event, function, useCapture);

Bien qu'il ait trois paramètres, les paramètres événement et fonction sont largement utilisés. Le troisième paramètre est facultatif à définir. Les valeurs de cette fonction sont définies comme suit.

Valeurs des paramètres

événement: C'est un paramètre obligatoire. Il peut être défini comme une chaîne spécifiant le nom de l'événement.

Remarque : N'utilisez aucun préfixe tel que « on » avec la valeur du paramètre. Par exemple, utilisez « clic » au lieu d’utiliser « onclick ».

fonction: C'est également un paramètre obligatoire. C'est un Fonction JavaScript qui répond à l'événement qui se produit.

sinon si bash

utiliserCapture : C'est un paramètre facultatif. C'est une valeur de type booléen qui précise si l'événement est exécuté en phase de bullage ou de capture. Ses valeurs possibles sont vrai et FAUX . Lorsqu'il est défini sur true, le gestionnaire d'événements s'exécute dans la phase de capture. Lorsqu'il est défini sur false, le gestionnaire s'exécute dans la phase de bouillonnement. Sa valeur par défaut est FAUX .

Voyons quelques illustrations de l'utilisation de la méthode addEventListener().

Exemple

Il s'agit d'un exemple simple d'utilisation de la méthode addEventListener(). Nous devons cliquer sur le donné Bouton HTML pour voir l'effet.

Exemple de la méthode addEventListener().

Cliquez sur le bouton suivant pour voir l'effet.

Cliquez-moi document.getElementById('btn').addEventListener('click', fun); function fun() { document.getElementById('para').innerHTML = 'Hello World' + '
' + 'Bienvenue sur javaTpoint.com'; }Testez-le maintenant

Sortir

JavaScript addEventListener()

Après avoir cliqué sur le bouton HTML donné, la sortie sera -

fractionnement de chaînes c++
JavaScript addEventListener()

Maintenant, dans l'exemple suivant, nous verrons comment ajouter de nombreux événements au même élément sans écraser les événements existants.

Exemple

Dans cet exemple, nous ajoutons plusieurs événements au même élément.

Ceci est un exemple d'ajout de plusieurs événements au même élément.

Cliquez sur le bouton suivant pour voir l'effet.

Cliquez-moi function fun() { alert('Bienvenue sur javaTpoint.com'); } function fun1() { document.getElementById('para').innerHTML = 'Ceci est la deuxième fonction'; } function fun2() { document.getElementById('para1').innerHTML = 'Ceci est la troisième fonction'; } var monbtn = document.getElementById('btn'); mybtn.addEventListener('clic', amusant); monbtn.addEventListener('click', fun1); monbtn.addEventListener('click', fun2);Testez-le maintenant

Sortir

JavaScript addEventListener()

Désormais, lorsque nous cliquons sur le bouton, une alerte s'affichera. Après avoir cliqué sur le bouton HTML donné, la sortie sera -

JavaScript addEventListener()

Lorsque nous quittons l'alerte, le résultat est -

JavaScript addEventListener()

Exemple

Dans cet exemple, nous ajoutons plusieurs événements d'un type différent au même élément.

Ceci est un exemple d'ajout de plusieurs événements de types différents au même élément.

types d'ordinateurs

Cliquez sur le bouton suivant pour voir l'effet.

java fin de la boucle
Cliquez-moi function fun() { btn.style.width = '50px'; btn.style.height = '50px'; btn.style.background = 'jaune'; btn.style.color = 'bleu'; } function fun1() { document.getElementById('para').innerHTML = 'Ceci est la deuxième fonction'; } function fun2() { btn.style.width = ''; btn.style.hauteur = ''; btn.style.background = ''; btn.style.color = ''; } var monbtn = document.getElementById('btn'); mybtn.addEventListener('mouseover', amusant); monbtn.addEventListener('click', fun1); monbtn.addEventListener('mouseout', fun2);Testez-le maintenant

Sortir

JavaScript addEventListener()

Lorsque nous déplaçons le curseur sur le bouton, la sortie sera -

JavaScript addEventListener()

Après avoir cliqué sur le bouton et laissé le curseur, la sortie sera -

JavaScript addEventListener()

Bullage d'événements ou capture d'événements

Maintenant, nous comprenons l'utilisation du troisième paramètre de addEventListener() de JavaScript, c'est-à-dire utilisezCapture.

Dans le DOM HTML, bouillonnant et Capturer sont les deux modes de propagation des événements. Nous pouvons comprendre ces manières en prenant un exemple.

Supposons que nous ayons un élément div et un élément paragraphe à l'intérieur, et que nous appliquons le 'Cliquez sur' événement à tous les deux en utilisant le addEventListener() méthode. Maintenant, la question est de savoir si l'on clique sur l'élément de paragraphe, quel événement de clic de l'élément est géré en premier.

Alors, dans bouillonnant, l'événement de l'élément paragraphe est géré en premier, puis l'événement de l'élément div est géré. Cela signifie que dans le bouillonnement, l'événement de l'élément interne est géré en premier, puis l'événement de l'élément le plus externe sera géré.

Dans Capturer l'événement de l'élément div est géré en premier, puis l'événement de l'élément paragraphe est géré. Cela signifie que lors de la capture, l'événement de l'élément externe est géré en premier, puis l'événement de l'élément le plus interne sera géré.

comment vérifier la taille de l'écran 
 addEventListener(event, function, useCapture);

Nous pouvons spécifier la propagation en utilisant le utiliserCapture paramètre. Lorsqu'il est défini sur false (qui est sa valeur par défaut), alors l'événement utilise la propagation bouillonnante, et lorsqu'il est défini sur true, il y a la propagation de capture.

Nous pouvons comprendre le bouillonnant et capturer à l'aide d'une illustration.

Exemple

Dans cet exemple, il y a deux éléments div. Nous pouvons voir l'effet bouillonnant sur le premier élément div et l'effet de capture sur le deuxième élément div.

Lorsque nous double-cliquons sur l'élément span du premier élément div, l'événement de l'élément span est géré en premier plutôt que l'élément div. On l'appelle bouillonnant .

Mais lorsque nous double-cliquons sur l'élément span du deuxième élément div, l'événement de l'élément div est géré en premier plutôt que l'élément span. On l'appelle capturer .

 div{ background-color: lightblue; border: 2px solid red; font-size: 25px; text-align: center; } span{ border: 2px solid blue; } This is a div element. <br> <br> <span id="s2"> This is a span element. </span> document.getElementById(&apos;d1&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on div element&apos;)}, false); document.getElementById(&apos;s1&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on span element&apos;)}, false); document.getElementById(&apos;d2&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on div element&apos;)}, true); document.getElementById(&apos;s2&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on span element&apos;)}, true);
Testez-le maintenant

Sortir

JavaScript addEventListener()

Nous devons double-cliquer sur les éléments spécifiques pour voir l'effet.