The metoda addEventListener(). al interfeței EventTarget setează o funcție care va fi apelată ori de câte ori evenimentul specificat este livrat țintei. Această metodă permite gestionarea mai multor evenimente pe un element, permițând gestionarea interacțiunii dinamice și flexibile în cadrul aplicațiilor web.
Sintaxă:
element.addEventListener(event, listener, useCapture);>
Parametri:
- eveniment: evenimentul poate fi orice eveniment JavaScript valid. Evenimentele sunt folosite fără prefixe, cum ar fi folosirea click în loc de onclick sau mousedown în loc de onmousedown.
- ascultător (funcție de gestionare): Poate fi o funcție JavaScript care răspunde la evenimentul care are loc.
- useCapture: Este un parametru opțional utilizat pentru a controla propagarea evenimentului. O valoare booleană este transmisă unde Adevărat denota faza de captare si fals denotă faza de barbotare.
Exemplul 1: În acest exemplu, vom afișa text pe pagina web după ce facem clic pe butonul.
HTML
Titlu document> cap> <body> <button id='try'>Faceți clic aicibutton><h1 id='text'>h1><script>document.getElementById('try').addEventListener('click', function () { document.getElementById('text').innerText = 'techcodeview.com'; }); script> body> html>>></pre> </code> <p dir='ltr'> <b> <strong>Ieșire:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples.webp' alt="JavaScript addEventListener() cu exemple"><p>JavaScript addEventListener() cu exemple</p> <p dir='ltr'> <br> <b> <strong>Exemplul 2:</strong> </b> <span>În acest exemplu, două evenimente mouseover și mouseout sunt adăugate la același element. Dacă textul este trecut cu mouse-ul, apare evenimentul mouseover și funcția RespondMouseOver este invocată, în mod similar pentru evenimentul mouseout, funcția RespondMouseOut este invocată.</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>Titlu document> cap> <body> <button id='clickIt'>Faceți clic aicibutton><p id='hoverPara'>Plasați cursorul peste acest text !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('efect').innerHTML += 'MouseOver Event' + ' '; } function RespondMouseOut() { document.getElementById('efect').innerHTML += 'MouseOut Event' + ' '; } function RespondClick() { document.getElementById('efect').innerHTML += 'Click Event' + ' '; } script> body> html>>></pre> </code> <p dir='ltr'> <b> <strong>Ieșire:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples-2.webp' alt="JavaScript addEventListener() cu exemple"><p>JavaScript addEventListener() cu exemple</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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/binary-search/">Căutare Binară</a> </li><li> <a href="/socket-programming/">Programare Socket</a> </li><li> <a href="/java-conversion/">Conversie Java</a> </li><li> <a href="/c-inheritance/">C++-Moștenire</a> </li><li> <a href="/sql/">SQL</a> </li><li> <a href="/cpp-map/">Cpp-Harta</a> </li><li> <a href="/cpp-vector/">Cpp-Vector</a> </li><li> <a href="/terms-of-use/">Termeni De Utilizare</a> </li><li> <a href="/geometric/">Geometric</a> </li><li> <a href="/bordering-countries-sea/">Țări Și Marea Limită</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">Algoritmul de codificare Huffman</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Algoritmul codului Huffman cu tutorial daa, introducere, algoritm, analiză asimptotică, structură de control, recurență, metodă principală, metoda arborelui recursiv, algoritm de sortare, sortare cu bule, sortare selecție, sortare inserție, căutare binară, sortare îmbinare, sortare numărătoare etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/huffman-coding-algorithm"> <i class="fa fa-external-link"></i> Citeşte Mai Mult</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articole Interesante</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/linux-tools/">Linux-Instrumente</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/nohup-command-linux-with-examples">Comanda nohup în Linux cu exemple</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-update-multiple-columns-single-update-statement-sql">Cum se actualizează mai multe coloane într-o singură instrucțiune de actualizare în SQL?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-full-form-asl">Care este forma completă a ASL</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-software-development">Ce este dezvoltarea software-ului?</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">Posturi Populare</h2>
<div class="content">
<ul class="list"> <li><a href="/rakul-preet-singh">Actrița Rakul Preet Singh</a>
</li><li><a href="/cp-command-linux-unix-linux-copy-file">comanda cp în linux</a>
</li><li><a href="/python-operators">operator python //</a>
</li><li><a href="/best-smile-world">cel mai bun zâmbet din lume</a>
</li><li><a href="/alisa-manyonok">alisa manyonok</a>
</li><li><a href="/jquery-click">jquery la clic</a>
</li><li><a href="/salman-khan">varsta salman khan khan</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 Toate Drepturile Rezervate | <a href="//iw.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Declinare A Răspunderii</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Despre Noi</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politica De Confidențialitate</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>