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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <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 /> <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="">Categoria</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/javascript-array/">Array-Javascript</a> </li><li> <a href="/stl/">Stl</a> </li><li> <a href="/groovy-tutorial/">Tutorial Fantastico</a> </li><li> <a href="/digital-electronics-adders/">Elettronica Digitale - Sommatori</a> </li><li> <a href="/r-functions/">Funzioni R</a> </li><li> <a href="/css-tutorial/">Esercitazione Sui Css</a> </li><li> <a href="/python-numpy-sorting-searching/">Ricerca Con Ordinamento Numpy Di Python</a> </li><li> <a href="/design-pattern/">Design Pattern</a> </li><li> <a href="/2d-shapes/">Forme 2D</a> </li><li> <a href="/data-structures-algorithms-qna/">Strutture Dati E Algoritmi-Qna</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Bash Scripting – Dichiarazione del caso</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Un portale di informatica per geek. Contiene articoli di informatica e programmazione ben scritti, ben pensati e ben spiegati, quiz e domande per colloqui pratici/competitivi/aziendali.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/bash-scripting-case-statement"> <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="/valentine-week-list-2024">Elenco della settimana di San Valentino 2024: nomi di tutti i giorni dal 7 febbraio al 14 febbraio</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/html-dom">DOM HTML (modello oggetto documento)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/angel-number-222-meaning-symbolism">Angelo numero 222: significato e simbolismo</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/static-variables-java-with-examples">Variabili statiche in Java con esempi</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/numpy-save-method-save-array-file">Metodo NumPy save() | Salva array in un file</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="/alpha-beta-pruning">potatura a-b</a>
</li><li><a href="/quick-access-toolbar">Barra degli strumenti di accesso rapido a MS Word</a>
</li><li><a href="/difference-between-ddl">ddl vs dml</a>
</li><li><a href="/powershell-vs-bash-shell">powershell contro bash</a>
</li><li><a href="/java-map-interface">cos'è la mappa Java</a>
</li><li><a href="/java-convert-int-string">int in stringa</a>
</li><li><a href="/java-string-compareto">confrontare con 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="//ar.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>