The addEventListener() metodas EventTarget sąsaja nustato funkciją, kuri bus iškviečiama kiekvieną kartą, kai nurodytas įvykis bus pristatytas į tikslą. Šis metodas leidžia naudoti kelis elemento įvykių tvarkykles, įgalindamas dinamišką ir lankstų sąveikos valdymą žiniatinklio programose.
Sintaksė:
element.addEventListener(event, listener, useCapture);>
Parametrai:
- įvykis: įvykis gali būti bet koks galiojantis JavaScript įvykis. Įvykiai naudojami be priešdėlių, pavyzdžiui, paspaudimas vietoj onclick arba mousedown vietoj onmousedown.
- klausytojas (tvarkyklės funkcija): Tai gali būti JavaScript funkcija, kuri reaguoja į įvykį.
- useCapture: Tai pasirenkamas parametras, naudojamas įvykių plitimui valdyti. Būlio reikšmė perduodama kur tiesa žymi fiksavimo fazę ir klaidinga žymi burbuliavimo fazę.
1 pavyzdys: Šiame pavyzdyje mes pateiksime tekstą tinklalapyje spustelėję mygtuką.
HTML Dokumento pavadinimas> galva> <body> <button id='try'>Spustelėkite čia mygtuką><h1 id='text'>h1><script>document.getElementById('try').addEventListener('click', function () { document.getElementById('text').innerText = 'techcodeview.com'; }); script> body> html>>></tag> <p dir='ltr'> <b> <strong>Išvestis:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples.webp' alt="JavaScript addEventListener() su pavyzdžiais"><p>JavaScript addEventListener() su pavyzdžiais</p> <p dir='ltr'> <br> <b> <strong>2 pavyzdys:</strong> </b> <span>Šiame pavyzdyje prie to paties elemento pridedami du įvykiai, užvedę pelės žymeklį ir nuvedę pelės žymeklį. Jei virš teksto užvedamas pelės žymeklis, įvyksta pelės žymeklio užvedimo įvykis ir iškviečiama funkcija „RespondMouseOver“, panašiai ir užvedus pelės žymeklį, iškviečiama funkcija „RespondMouseOut“.</span></p>HTML<tag data-text-1=' <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Dokumento pavadinimas> galva> <body> <button id='clickIt'>Spustelėkite čia mygtuką><p id='hoverPara'>Užveskite pelės žymeklį virš šio teksto !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('effect').innerHTML += 'MouseOver Event' + ' '; } function RespondMouseOut() { document.getElementById('effect').innerHTML += 'MouseOut Event' + ' '; } function RespondClick() { document.getElementById('effect').innerHTML += 'Spustelėjimo įvykis' + ' '; } scenarijus> body> html>>></tag> <p dir='ltr'> <b> <strong>Išvestis:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples-2.webp' alt="JavaScript addEventListener() su pavyzdžiais"><p>JavaScript addEventListener() su pavyzdžiais</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="/ds-tutorial/">Ds Pamoka</a> </li><li> <a href="/python-math-library-functions/">Python Matematikos Bibliotekos Funkcijos</a> </li><li> <a href="/cpp-algorithm-library/">Cpp-Algoritm-Library</a> </li><li> <a href="/data-science/">Duomenų Mokslas</a> </li><li> <a href="/java-double/">Java-Dvigubas</a> </li><li> <a href="/object-oriented-design/">Objektinis Dizainas</a> </li><li> <a href="/chemistry-class-9-cat/">Chemija-9 Klasė</a> </li><li> <a href="/goldman-sachs/">Goldman Sachs</a> </li><li> <a href="/css-properties/">Css-Ypatybės</a> </li><li> <a href="/cash-app-queries/">Cash App – Užklausos</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">Lodash _.sortBy() metodas</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Kompiuterių mokslo portalas, skirtas geikams. Jame yra gerai parašyti, gerai apgalvoti ir gerai paaiškinti informatikos ir programavimo straipsniai, viktorinos ir praktikos / konkurencinio programavimo / įmonės interviu klausimai.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/lodash-_-sortby-method"> <i class="fa fa-external-link"></i> Skaityti Daugiau</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Įdomios Straipsniai</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/multiple-linear-regression">Daugkartinė tiesinė regresija</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/dijkstra-algorithm-java">Dijkstra algoritmas Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/rj45-color-code">RJ45 spalvos kodas</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/convert-min-heap-to-max-heap">Konvertuoti min Heap į „Max Heap“</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/whats-difference-between-an-image">Kuo skiriasi vaizdas, nuotrauka ir paveikslėlis?</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">Populiarios Temos</h2>
<div class="content">
<ul class="list"> <li><a href="/java-string-replace">pakeisti iš eilutės java</a>
</li><li><a href="/java-color-codes">java spalvos</a>
</li><li><a href="/linux-home-directory">kas yra $home linux</a>
</li><li><a href="/sql-select-from-multiple-tables">sql kelių lentelių pasirinkimas</a>
</li><li><a href="/how-read-csv-file-java">skaityti iš csv failo java</a>
</li><li><a href="/java-string">java eilutė</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 Visos Teisės Saugomos | <a href="//pt.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atsisakymas</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Apie Mus</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privatumo Politika</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>
