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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <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 /> <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="">Kategorija</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/compiler-tutorial/">Vadnica Za Prevajalnik</a> </li><li> <a href="/reactjs-component/">Komponenta Reactjs</a> </li><li> <a href="/python-sorting-exercises/">Python Sortiranje-Vaje</a> </li><li> <a href="/google-tricks/">Googlovi Triki</a> </li><li> <a href="/stl/">Stl</a> </li><li> <a href="/java-vector-class/">Razred Java Vector</a> </li><li> <a href="/java-awt-events/">Java Awt In Dogodki</a> </li><li> <a href="/java-arrays/">Java-Arrays</a> </li><li> <a href="/python-oop/">Python-Oop</a> </li><li> <a href="/c-conversion-programs/">C Programi Za Pretvorbo</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">MySQL Common Table Expression (CTE)</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> MySQL Common Table Expression (CTE) z vadnico za mysql, primeri, funkcije, programiranje, mysql, literali, kazalec, procedura, regexp_like(), regexp_replace operator, regularni izraz, crud itd.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/mysql-common-table-expression"> <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="/explained-what-is-younow-24278">Pojasnjeno: Kaj je YouNow?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-this-pointer">C++ ta kazalec</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-interview-questions">Vprašanja in odgovori za intervjuje C++ (2024)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/check-if-a-number-is-palindromic-prime">Preverite, ali je številka palindromska</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-colors-make-turquoise-131312">Katere barve naredijo turkizno? Kako ustvariti popolno turkizno barvo</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="/java-convert-float-string">float na niz</a>
</li><li><a href="/string-concatenation-java">združevanje nizov</a>
</li><li><a href="/machine-learning-models">modeli strojnega učenja</a>
</li><li><a href="/linux-which-command">linux ukazi, ki</a>
</li><li><a href="/android-intent-tutorial">naklep intent</a>
</li><li><a href="/java-list-sort-method">seznam razvrščenih 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 Vse Pravice Pridržane | <a href="//pl.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>