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="/cyber-defence-intelligence/">Intelligenza Sulla Difesa Informatica</a> </li><li> <a href="/cpp-destructor/">Cpp-Distruttore</a> </li><li> <a href="/es6-cat/">Es6</a> </li><li> <a href="/java-applet/">Applet Java</a> </li><li> <a href="/digital-electronics-logic-gate/">Elettronica Digitale - Porta Logica</a> </li><li> <a href="/bitwise-operators/">Operatori Bit A Bit</a> </li><li> <a href="/reactjs-component/">Componente Reactjs</a> </li><li> <a href="/cpp-map-functions/">Cpp-Map-Funzioni</a> </li><li> <a href="/order-statistics/">Statistiche Degli Ordini</a> </li><li> <a href="/ancient-history/">Storia Antica</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">Tutorial Sulle Freccette</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Tutorial Sulle Freccette</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/dart-tutorial/"> <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-set-up-solitaire-with-cards-131514">Come impostare il solitario con le carte: 5 varianti</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/javascript-switch">Passaggio JavaScript</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-ring-topology">Cos'è una topologia ad anello?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-structs">Strutture C++</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-use-lm-function-r-fit-linear-models">Come utilizzare la funzione lm() in R per adattare i modelli lineari?</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="/fiscal-quarters-q1-q2">quali mesi sono q1</a>
</li><li><a href="/git-head">inurl:.git/head</a>
</li><li><a href="/how-does-computer-work">lavoro informatico</a>
</li><li><a href="/bias-variance-machine-learning">bias e varianza</a>
</li><li><a href="/rename-folder-linux">linux come rinominare una directory</a>
</li><li><a href="/java-convert-long-int">long per int 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="//uk.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>