Le Méthode addEventListener() de l'interface EventTarget configure une fonction qui sera appelée chaque fois que l'événement spécifié est transmis à la cible. Cette méthode autorise plusieurs gestionnaires d'événements sur un élément, permettant une gestion dynamique et flexible des interactions au sein des applications Web.
Syntaxe:
element.addEventListener(event, listener, useCapture);>
Paramètres:
- événement: event peut être n’importe quel événement JavaScript valide. Les événements sont utilisés sans préfixes on, comme utiliser click au lieu de onclick ou mousedown au lieu de onmousedown.
- écouteur (fonction de gestionnaire): Il peut s'agir d'une fonction JavaScript qui répond à l'événement qui se produit.
- utiliserCapture : Il s'agit d'un paramètre facultatif utilisé pour contrôler la propagation des événements. Une valeur booléenne est passée là où vrai désigne la phase de capture et FAUX désigne la phase de bouillonnement.
Exemple 1: Dans cet exemple, nous afficherons du texte sur la page Web après avoir cliqué sur le bouton.
HTML
Titre du document> tête> <body> <button id='try'>Cliquez icibouton><h1 id='text'>h1><script>document.getElementById('try').addEventListener('click', function () { document.getElementById('text').innerText = 'techcodeview.com'; }); script> corps> html>></pre> </code> <p dir='ltr'> <b> <strong>Sortir:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples.webp' alt="JavaScript addEventListener() avec exemples"><p>JavaScript addEventListener() avec exemples</p> <p dir='ltr'> <br> <b> <strong>Exemple 2 :</strong> </b> <span>Dans cet exemple, deux événements mouseover et mouseout sont ajoutés au même élément. Si le texte est survolé, l'événement mouseover se produit et la fonction RespondMouseOver est invoquée, de même pour l'événement mouseout, la fonction RespondMouseOut est invoquée.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Titre du document> tête> <body> <button id='clickIt'>Cliquez icibouton><p id='hoverPara'>Passez la souris sur ce texte !p> <b id='effect'>b><script>const x = document.getElementById('clickIt'); const y = document.getElementById('hoverPara'); x.addEventListener('click', RespondClick); y.addEventListener('mouseover', RespondMouseOver); y.addEventListener('mouseout', RespondMouseOut); function RespondMouseOver() { document.getElementById('effect').innerHTML += 'MouseOver Event' + ' '; } function RespondMouseOut() { document.getElementById('effect').innerHTML += 'MouseOut Event' + ' '; } function RespondClick() { document.getElementById('effect').innerHTML += 'Click Event' + ' '; } script> corps> html>></pre> </code> <p dir='ltr'> <b> <strong>Sortir:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples-2.webp' alt="JavaScript addEventListener() avec exemples"><p>JavaScript addEventListener() avec exemples</p> <br> <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//changelesschoir.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Catégorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/interview-questions/">Questions-D'entretien</a> </li><li> <a href="/csharp-method/">Méthode Csharp</a> </li><li> <a href="/c-input-output-quiz/">Quiz Sur Les Entrées Et Sorties C</a> </li><li> <a href="/python-numpy-random-sampling/">Python Numpy-Échantillonnage Aléatoire</a> </li><li> <a href="/parts-speech/">Parties Du Discours</a> </li><li> <a href="/python-numpy-matrix-function/">Fonction Python Numpy-Matrix</a> </li><li> <a href="/math-queries/">Requêtes Mathématiques</a> </li><li> <a href="/unity-tutorial/">Tutoriel Unity</a> </li><li> <a href="/selenium-tutorial/">Tutoriel Sélénium</a> </li><li> <a href="/binary-search/">Recherche Binaire</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//changelesschoir.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Remplacez chaque élément par l'élément le moins grand à sa droite</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Étant donné un tableau d'entiers, remplacez chaque élément par l'élément le moins grand sur son côté droit dans le tableau. S'il n'y a pas d'éléments plus grands sur le côté droit, remplacez-le par -1.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/replace-every-element-with-the-least-greater-element-on-its-right"> <i class="fa fa-external-link"></i> Lire La Suite</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Des Articles Intéressants</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/what-is-average-sat-score-1311458">Quel est le score SAT moyen ?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/bisect-algorithm-functions-in-python">Fonctions de l'algorithme de bissectrice en Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-convert-double-string">Java Convertir double en chaîne</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/iterator-in-java">Itérateur en Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/store-program-control-concept">Concept de contrôle du programme de magasin</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Articles Populaires</h2>
<div class="content">
<ul class="list"> <li><a href="/java-convert-int-char">int en char java</a>
</li><li><a href="/fmovies-alternatives">films</a>
</li><li><a href="/difference-between-ant">fourmi contre maven</a>
</li><li><a href="/alphabet-numbers">numéroter l'alphabet</a>
</li><li><a href="/java-string-replaceall">la chaîne remplace tout Java</a>
</li><li><a href="/alpha-beta-pruning">taille a-b</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Tous Les Droits Sont Réservés | <a href="//iw.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Clause De Non-Responsabilité</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">A Propos De Nous</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politique De Confidentialité</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>