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="//changelesschoir.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="/aws-tutorial/">Aws Pamoka</a> </li><li> <a href="/socket-programming/">Lizdų Programavimas</a> </li><li> <a href="/java-object-oriented/">„Java“ Į Objektą Orientuota</a> </li><li> <a href="/r-matrix/">R-Matrica</a> </li><li> <a href="/python-library/">Python Biblioteka</a> </li><li> <a href="/english-blogs/">Anglų Dienoraščiai</a> </li><li> <a href="/ai-ml-ds-with-python/">Ai-Ml-Ds Su Python</a> </li><li> <a href="/cpp-file-handling/">Cpp Failų Tvarkymas</a> </li><li> <a href="/python-operators/">Python Operatoriai</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">
<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="//changelesschoir.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">C++ pagrindinė įvestis ir išvestis (I/O)</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> C++ pagrindinė įvesties išvestis (cin, cout, endl) pradedantiesiems ir profesionalams su konstruktoriaus, šio rodyklės, statinio, struktūrų, paveldėjimo, agregavimo, polimorfizmo, narių perkrovos, sąsajų, vardų erdvių, eilučių, išimčių tvarkymo pavyzdžiais ir kt.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/c-basic-input-output"> <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="/python-numpy-arraymanipulation/">Python Numpy-Arraymanipuliacija</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-server">Kas yra serveris?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/sql-delete-join">SQL DELETE JOIN</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/log4j-logging-levels">Log4J registravimo lygiai</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/static-kinetic-friction">Statinė ir kinetinė trintis</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="/how-fixandroid-process-acorehas-stopped-errors-android">Android proceso acore</a>
</li><li><a href="/infinite-loop-c">begalinis ciklas</a>
</li><li><a href="/factorial-program-c">faktorialas c</a>
</li><li><a href="/java-comparable-interface">palyginama java</a>
</li><li><a href="/sql-select-from-multiple-tables">pasirinkite iš kelių SQL lentelių</a>
</li><li><a href="/conversion-from-nfa-dfa">nfa į dfa</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="//da.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>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>
