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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <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 /> <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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/bts/">Bts</a> </li><li> <a href="/selenium-tutorial/">Tutorial Selenium</a> </li><li> <a href="/linux-directories/">Directoare Linux</a> </li><li> <a href="/geometry/">Geometrie</a> </li><li> <a href="/embedded-systems/">Sisteme Integrate</a> </li><li> <a href="/ssis-tutorial/">Tutorial Ssis</a> </li><li> <a href="/java-system-class/">Clasa De Sistem Java</a> </li><li> <a href="/excel-advanced/">Excel - Avansat</a> </li><li> <a href="/pc-tips/">Sfaturi Pc</a> </li><li> <a href="/python-list/">Lista-Python</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Cine a inventat drona?</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="/who-invented-drone"> <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="/how-insert-watermark-word">Cum să inserați un filigran în Word</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/git-origin-master">Git Origin Master</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-operators">C# | Operatori</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/trouble-sleeping-learn-how-long-caffeine-stays-your-system-1311094">Probleme cu somnul? Aflați cât de mult rămâne cofeina în sistemul dumneavoastră</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-program-quicksort">Programul Python pentru QuickSort</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="/alphabet-numbers">alfabet numerotat</a>
</li><li><a href="/how-create-dropdown-list-using-javascript">meniu derulant javascript</a>
</li><li><a href="/sql-select">sql selectați ca</a>
</li><li><a href="/java-math-sqrt-method">sqrt java matematică</a>
</li><li><a href="/data-structures-java">structuri de date în 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="//sv.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>