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="/csharp-generic-list/">Csharp-Generic-List</a> </li><li> <a href="/cyber-defence-intelligence/">Informații De Apărare Cibernetică</a> </li><li> <a href="/blogathon-2021-cat/">Blogathon-2021</a> </li><li> <a href="/java-priority-queue/">Java-Coada-Prioritate</a> </li><li> <a href="/physics-concepts/">Fizica-Concepte</a> </li><li> <a href="/python-pip/">Python-Pip</a> </li><li> <a href="/xml-tutorial/">Tutorial Xml</a> </li><li> <a href="/b-tree/">B-Tree</a> </li><li> <a href="/circular-linked-list/">Listă Circulară Legată</a> </li><li> <a href="/python-numpy-statistics-functions/">Python Numpy-Funcții De Statistică</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">Cum să numărăm valorile unice în Excel? 5 moduri ușoare</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Un portal de informatică pentru tocilari. Conține articole de informatică și programare bine scrise, bine gândite și bine explicate, chestionare și întrebări practice/programare competitivă/interviu pentru companie.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-count-unique-values-excel"> <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="/history-python">Istoria lui Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-much-is-100g-ml">Cât este 100g în ml?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/surface-area-prism">Suprafața unei prisme</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/top-10-longest-nonstop-flights-world-2024">Top 10 cele mai lungi zboruri fără escală din lume 2024</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/mvc-framework-introduction">Introducere MVC Framework</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="/javascript-alert">caseta de alertă javascript</a>
</li><li><a href="/what-is-10-ml-ounces">10 ml în uncii</a>
</li><li><a href="/numpy-pad-python">umplutură np</a>
</li><li><a href="/java-if-else-statement">codificare java declarația if else</a>
</li><li><a href="/govinda">govinda</a>
</li><li><a href="/first-java-program-hello-world-example">programul java salut</a>
</li><li><a href="/java-convert-char-int">char și 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 Toate Drepturile Rezervate | <a href="//de.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>