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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <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 /> <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="/commerce-difference-between/">Komercija – Skirtumas Tarp</a> </li><li> <a href="/permutation/">Permutacija</a> </li><li> <a href="/microprocessor/">Mikroprocesorius</a> </li><li> <a href="/c-class-object/">C++ Klasė Ir Objektas</a> </li><li> <a href="/c-programs/">C Programos</a> </li><li> <a href="/binary-representation/">Dvejetainis Vaizdavimas</a> </li><li> <a href="/basic-coding-problems/">Pagrindinės Kodavimo Problemos</a> </li><li> <a href="/salesforce-tutorial/">Salesforce Mokymo Programa</a> </li><li> <a href="/python-list-programs/">Python Sąrašo Programos</a> </li><li> <a href="/installation-ubuntu/">Diegimas Ubuntu</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Linijos komanda</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> AutoCAD Line komanda su Kas yra AutoCAD, Diegimas, Versijos, Atsisiuntimas, AutoCAD 2020 Nemokama bandomoji versija, Skaičiuoklė, AutoCAD 2019, AutoCAD 2018, AutoCAD vs AutoCAD LT, AutoCAD 360, AutoCAD Icons ir kt.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/line-command"> <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="/synchronous-motor">Sinchroninis variklis</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/computer/">Kompiuteris</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/every-ap-statistics-practice-test-available-131690">Kiekvienas AP statistikos praktikos testas: nemokamas ir oficialus</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-install-pip-macos">Kaip įdiegti pip „MacOS“?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/cpp-inheritance/">Cpp-Paveldėjimas</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="/c-array-structures">struktūros naudojant masyvus c</a>
</li><li><a href="/java-duration-class">Java trukmė</a>
</li><li><a href="/wumpus-world-artificial-intelligence">wumpus pasaulis</a>
</li><li><a href="/pyspark-tutorial">pyspark pamoka</a>
</li><li><a href="/typescript-foreach">mašinraščio foreach</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="//ar.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>
