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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <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 /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <br> <br></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="/max-heap/">Tas Maximum</a> </li><li> <a href="/javascript-functions/">Fonctions Javascript</a> </li><li> <a href="/java-operators/">Opérateurs Java</a> </li><li> <a href="/matrix/">Matrice</a> </li><li> <a href="/c-programs/">Programmes C</a> </li><li> <a href="/pyspark-tutorial/">Tutoriel Pyspark</a> </li><li> <a href="/cpp-input-output/">Cpp-Entrée-Sortie</a> </li><li> <a href="/python-functions/">Fonctions Python</a> </li><li> <a href="/cyber-security-tutorial/">Tutoriel Sur La Cybersécurité</a> </li><li> <a href="/javascript-operators/">Opérateurs Javascript</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Opérateurs TypeScript</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Opérateurs TypeScript avec didacticiel TypeScript, introduction TypeScript, versions, TypeScript et Javascript, fonctionnalités, composants, installation, premier programme TypeScript, types TypeScript, etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/typescript-operators"> <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="/countries-that-start-with-o">Pays commençant par O</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/top-10-largest-cities-china">Top 10 des plus grandes villes de Chine</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/javascript-form-validation">Validation du formulaire JavaScript</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/cout-c">cout en C++</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-fix-horizontal-lines-computer-screen">Comment réparer les lignes horizontales sur un écran d’ordinateur ?</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="/spring-mvc-tutorial">printemps mvc</a>
</li><li><a href="/java-scanner">classe de scanner Java</a>
</li><li><a href="/callback-hell-javascript">rappel en enfer en javascript</a>
</li><li><a href="/design-patterns-java">modèles de programmation Java</a>
</li><li><a href="/c-pointers">pointeurs en c</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="//uk.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>