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="//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="">Categoria</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/dart-tutorial/">Tutorial Sulle Freccette</a> </li><li> <a href="/24-7-innovation-labs/">Laboratori Di Innovazione 24 Ore Su 24, 7 Giorni Su 7</a> </li><li> <a href="/dbms/">Dbms</a> </li><li> <a href="/python-pandas-dataframe-methods/">Metodi Python Pandas-Dataframe</a> </li><li> <a href="/oracle-tutorial/">Tutorial Sull'oracolo</a> </li><li> <a href="/java-stringbuffer/">Java-Stringbuffer</a> </li><li> <a href="/algorithms-backtracking/">Algoritmi-Backtracking</a> </li><li> <a href="/linux-system-admin/">Amministratore Di Sistema Linux</a> </li><li> <a href="/commerce-11th/">Commercio - 11</a> </li><li> <a href="/interview-preparation/">Preparazione Al Colloquio</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">Csharp-Generic-List</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Csharp-Generic-List</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/csharp-generic-list/"> <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="/how-check-if-key-exists-python-dictionary">Come verificare se esiste una chiave in un dizionario Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/comparator-interface-java-with-examples">Interfaccia comparatore in Java con esempi</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/mysql-varchar">MySQLVARCHAR</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/object-cloning-java">Clonazione di oggetti in Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-create-vector-python-using-numpy">Come creare un vettore in Python usando NumPy</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="/java-string-length">lunghezza della stringa Java</a>
</li><li><a href="/numpy-sum-python">np.sum</a>
</li><li><a href="/exception-handling-java">cos'è la gestione delle eccezioni in Java</a>
</li><li><a href="/lion-vs-tiger">"qual è la differenza tra un leone e una tigre"</a>
</li><li><a href="/length-array-c">ottieni la lunghezza dell'array in c</a>
</li><li><a href="/sql-data-types">tipi di dati successivi</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="//sk.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>
</body>
</html>