The metodo addEventListener(). vmesnika EventTarget nastavi funkcijo, ki bo poklicana vsakič, ko bo podani dogodek dostavljen cilju. Ta metoda omogoča več obdelovalcev dogodkov na elementu, kar omogoča dinamično in prilagodljivo upravljanje interakcij znotraj spletnih aplikacij.
Sintaksa:
element.addEventListener(event, listener, useCapture);>
Parametri:
- dogodek: dogodek je lahko kateri koli veljaven dogodek JavaScript. Dogodki se uporabljajo brez predpon, na primer uporaba click namesto onclick ali mousedown namesto onmousedown.
- poslušalec (funkcija obravnave): To je lahko funkcija JavaScript, ki se odzove na dogodek.
- useCapture: To je izbirni parameter, ki se uporablja za nadzor širjenja dogodkov. Logična vrednost je posredovana kam prav označuje fazo zajemanja in lažno označuje fazo mehurčkov.
Primer 1: V tem primeru bomo po kliku na gumb prikazali besedilo na spletni strani.
HTML
Naslov dokumenta> glava> <body> <button id='try'>Kliknite tukaj><h1 id='text'>h1><script>document.getElementById('poskusi').addEventListener('klik', funkcija () {document.getElementById('besedilo').innerText = 'techcodeview.com'; }); skript> telo> html>></pre> </code> <p dir='ltr'> <b> <strong>Izhod:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples.webp' alt="JavaScript addEventListener() s primeri"><p>JavaScript addEventListener() s primeri</p> <p dir='ltr'> <br> <b> <strong>Primer 2:</strong> </b> <span>V tem primeru sta istemu elementu dodana dva dogodka mouseover in mouseout. Če miškin kazalec premaknete nad besedilo, pride do dogodka prehoda miške in prikliče se funkcija RespondMouseOver, podobno kot pri dogodku izstopa miške se prikliče funkcija 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>Naslov dokumenta> glava> <body> <button id='clickIt'>Kliknite tukaj><p id='hoverPara'>Premaknite miškin kazalec nad to besedilo !p> <b id='effect'>b><script>const x = document.getElementById('clickIt'); const y = document.getElementById('hoverPara'); x.addEventListener('klik', RespondClick); y.addEventListener('mouseover', RespondMouseOver); y.addEventListener('mouseout', RespondMouseOut); funkcija RespondMouseOver() { document.getElementById('effect').innerHTML += 'MouseOver Event' + ' '; } function RespondMouseOut() { document.getElementById('effect').innerHTML += 'MouseOut Event' + ' '; } funkcija RespondClick() { document.getElementById('effect').innerHTML += 'Dogodek klika' + ' '; } skript> telo> html>></pre> </code> <p dir='ltr'> <b> <strong>Izhod:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples-2.webp' alt="JavaScript addEventListener() s primeri"><p>JavaScript addEventListener() s primeri</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="">Kategorija</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/mathematical/">Matematično</a> </li><li> <a href="/esports-gamers/">Igralci E-Športov</a> </li><li> <a href="/next-js/">Next.js</a> </li><li> <a href="/avl-tree/">Avl-Drevo</a> </li><li> <a href="/parents/">Starši</a> </li><li> <a href="/coa-tutorial/">Vadnica Coa</a> </li><li> <a href="/python-random/">Python-Naključno</a> </li><li> <a href="/java/">Java</a> </li><li> <a href="/control-systems/">Nadzorni Sistemi</a> </li><li> <a href="/typescript-tutorial/">Vadnica Za Typescript</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">Python bitni operaterji</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Računalniški portal za geeke. Vsebuje dobro napisane, dobro premišljene in dobro razložene članke o računalništvu in programiranju, kvize in vprašanja za prakso/tekmovalno programiranje/razgovor v podjetju.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/python-bitwise-operators"> <i class="fa fa-external-link"></i> Preberi Več</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Zanimivi Članki</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/what-is-desktop">Kaj je namizje?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/javascript-variable">Spremenljivka JavaScript</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/top-10-isaac-newton-inventions-revolutionary-discoveries">10 najboljših izumov in revolucionarnih odkritij Isaaca Newtona</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/base64-decoding-javascript">Dekodiranje Base64 v JavaScriptu</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/nick-pulos">Nick Pure</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">Priljubljene Objave</h2>
<div class="content">
<ul class="list"> <li><a href="/bash-if">stavek bash if</a>
</li><li><a href="/read-eval-print-loop-java">repl v javi</a>
</li><li><a href="/how-underline-text-css">css podčrtano besedilo</a>
</li><li><a href="/wumpus-world-artificial-intelligence">wumpus svet</a>
</li><li><a href="/open-source-operating-system">primer odprtokodnega operacijskega sistema je</a>
</li><li><a href="/polymorphism-java">polimorfizem java</a>
</li><li><a href="/java-string-length">niz dolžine</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 Vse Pravice Pridržane | <a href="//sl.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Zavrnitev Odgovornosti</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">O Podjetju</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politika Zasebnosti</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>