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="//spiritscaution.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="/sql-server/">Serveur Sql</a> </li><li> <a href="/webtech-tools/">Outils Webtech</a> </li><li> <a href="/c-map-function/">Fonction De Carte C++</a> </li><li> <a href="/terms-of-use/">Conditions D'utilisation</a> </li><li> <a href="/anime/">Anime</a> </li><li> <a href="/biology-difference-between/">Biologie-Différence-Entre</a> </li><li> <a href="/maths-class-12-cat/">Maths-Classe-12</a> </li><li> <a href="/cpp-template/">Modèle-Cpp</a> </li><li> <a href="/cell-signaling/">La Signalisation Cellulaire</a> </li><li> <a href="/python-exceptions/">Exceptions Python</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="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Itérer sur un dictionnaire en Python</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Un portail informatique pour les geeks. Il contient des articles sur l'informatique et la programmation bien écrits, bien pensés et bien expliqués, des quiz et des questions pratiques/de programmation compétitive/d'entretien d'entreprise.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/iterate-over-dictionary-python"> <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-difference-between-lists">Quelle est la différence entre les listes et les tableaux ?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/second-normal-form">Deuxième forme normale (2NF)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-insert-word-art-google-docs">Comment insérer du Word Art dans Google Docs</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-dictionary-programs/">Programmes-Dictionnaires Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/hashtable/">Table De Hachage</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="/shilpa-shetty">âge de Shilpa Shetty</a>
</li><li><a href="/java-linkedlist-class">liste de liens en Java</a>
</li><li><a href="/myflixer-alternatives">monflixr</a>
</li><li><a href="/java-operator-precedence">priorité des opérateurs Java</a>
</li><li><a href="/factorial-program-c">factorielle en c</a>
</li><li><a href="/java-string-substring">chaîne sous-chaîne</a>
</li><li><a href="/java-list-sort-method">liste de tri Java</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="//de.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>
</body>
</html>