IL metodo addEventListener() dell'interfaccia EventTarget imposta una funzione che verrà chiamata ogni volta che l'evento specificato viene consegnato alla destinazione. Questo metodo consente più gestori di eventi su un elemento, consentendo una gestione dinamica e flessibile dell'interazione all'interno delle applicazioni web.
Sintassi:
element.addEventListener(event, listener, useCapture);>
parametri:
- evento: l'evento può essere qualsiasi evento JavaScript valido. Gli eventi vengono utilizzati senza prefissi on come l'utilizzo di click invece di onclick o mousedown invece di onmousedown.
- ascoltatore (funzione del gestore): Può essere una funzione JavaScript che risponde all'evento che si verifica.
- utilizzareCapture: È un parametro facoltativo utilizzato per controllare la propagazione degli eventi. Viene passato un valore booleano where VERO denota la fase di cattura e falso denota la fase di gorgogliamento.
Esempio 1: In questo esempio, visualizzeremo il testo sulla pagina web dopo aver fatto clic sul pulsante.
HTML
Titolo documento> testa> <body> <button id='try'>Fare clic qui sul pulsante><h1 id='text'>h1><script>document.getElementById('try').addEventListener('click', function () { document.getElementById('text').innerText = 'techcodeview.com'; }); script> corpo> html>></pre> </code> <p dir='ltr'> <b> <strong>Produzione:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples.webp' alt="JavaScript addEventListener() con esempi"><p>JavaScript addEventListener() con esempi</p> <p dir='ltr'> <br> <b> <strong>Esempio 2:</strong> </b> <span>In questo esempio, due eventi mouseover e mouseout vengono aggiunti allo stesso elemento. Se si passa sopra il testo, si verifica l'evento mouseover e viene richiamata la funzione RespondMouseOver, analogamente per l'evento mouseout viene richiamata la funzione RespondMouseOut.</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>Titolo documento> testa> <body> <button id='clickIt'>Fare clic qui sul pulsante><p id='hoverPara'>Passa il mouse sopra questo testo !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> corpo> html>></pre> </code> <p dir='ltr'> <b> <strong>Produzione:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples-2.webp' alt="JavaScript addEventListener() con esempi"><p>JavaScript addEventListener() con esempi</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="">Categoria</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/design-pattern/">Design Pattern</a> </li><li> <a href="/object-oriented-design/">Design Orientato Agli Oggetti</a> </li><li> <a href="/chrome/">Cromo</a> </li><li> <a href="/gcd-lcm/">Gcd-Lcm</a> </li><li> <a href="/c-inheritance/">Ereditarietà C++</a> </li><li> <a href="/photoshop-tutorial/">Tutorial Di Photoshop</a> </li><li> <a href="/java-lang-package/">Pacchetto Java-Lang</a> </li><li> <a href="/jquery-methods/">Metodi Jquery</a> </li><li> <a href="/chemistry-class-9-cat/">Chimica-Classe-9</a> </li><li> <a href="/java-enum-class/">Classe Di Enumerazione Java</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">Compatibilità con l'Acquario: quale segno è il migliore?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Con chi è compatibile l'Acquario? Scopri qual è il miglior abbinamento dell'Acquario con la nostra guida ai segni compatibili con l'Acquario.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/aquarius-compatibility-1314"> <i class="fa fa-external-link"></i> Per Saperne Di Più</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articoli Interessanti</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/sql-date-functions">Funzioni di data SQL</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-zip-code">Differenza tra codice postale e codice postale</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-calculate-square-root">Come calcolare una radice quadrata?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/ultimate-guide-ap-us-history-exam-131610">La guida definitiva all'esame AP di storia degli Stati Uniti</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/string-format-method-c-with-examples-set-1">Metodo String.Format() in C# con esempi | Imposta – 1</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">Messaggi Popolari</h2>
<div class="content">
<ul class="list"> <li><a href="/how-convert-string-json-object-java">stringa su jsonobject</a>
</li><li><a href="/how-sort-an-array-java">array.sort in Java</a>
</li><li><a href="/arp-commands">comando arp</a>
</li><li><a href="/java-convert-char-int">carattere in Java</a>
</li><li><a href="/latex-partial-derivative">lattice di simboli di derivata parziale</a>
</li><li><a href="/data-types-java">tipi di dati 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 Tutti I Diritti Riservati | <a href="//hu.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Disclaimer</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Chi Siamo</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politica Sulla Riservatezza</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>