The metodi addEventListener(). no EventTarget saskarnes iestata funkciju, kas tiks izsaukta ikreiz, kad norādītais notikums tiks piegādāts mērķim. Šī metode ļauj elementā izmantot vairākus notikumu apdarinātājus, nodrošinot dinamisku un elastīgu mijiedarbības pārvaldību tīmekļa lietojumprogrammās.
Sintakse:
element.addEventListener(event, listener, useCapture);>
Parametri:
- pasākums: notikums var būt jebkurš derīgs JavaScript notikums. Notikumi tiek izmantoti bez prefiksiem, piemēram, izmantojot klikšķi, nevis onclick vai mousedown, nevis onmousedown.
- klausītājs (apdarinātāja funkcija): Tā var būt JavaScript funkcija, kas reaģē uz notiekošo notikumu.
- useCapture: Tas ir izvēles parametrs, ko izmanto, lai kontrolētu notikumu izplatību. Būla vērtība tiek nodota kur taisnība apzīmē uztveršanas fāzi un viltus apzīmē burbuļošanas fāzi.
1. piemērs: Šajā piemērā mēs parādīsim tekstu tīmekļa lapā pēc noklikšķināšanas uz pogas.
HTML Documenttitle> head> <body> <button id='try'>Noklikšķiniet šeit pogas><h1 id='text'>h1><script>document.getElementById('try').addEventListener('click', function () { document.getElementById('text').innerText = 'techcodeview.com'; }); skripts> body> html>>></tag> <p dir='ltr'> <b> <strong>Izvade:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples.webp' alt="JavaScript addEventListener() ar piemēriem"><p>JavaScript addEventListener() ar piemēriem</p> <p dir='ltr'> <br> <b> <strong>2. piemērs:</strong> </b> <span>Šajā piemērā vienam un tam pašam elementam ir pievienoti divi notikumi, kas novieto kursoru un novieto kursoru. Ja teksts tiek virzīts virs kursora, notiek peles novietošanas notikums un tiek izsaukta funkcija RespondMouseOver, līdzīgi kā peles izņemšanas notikumam tiek izsaukta 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>Documenttitle> head> <body> <button id='clickIt'>Noklikšķiniet šeit pogas><p id='hoverPara'>Virziet kursoru virs šī teksta !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 += 'Click Event' + ' '; } skripts> body> html>>></tag> <p dir='ltr'> <b> <strong>Izvade:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples-2.webp' alt="JavaScript addEventListener() ar piemēriem"><p>JavaScript addEventListener() ar piemēriem</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="/temples/">Deniņi</a> </li><li> <a href="/physics-formulas/">Fizika-Formulas</a> </li><li> <a href="/java-networking/">Java Tīklošana</a> </li><li> <a href="/java-character-class/">Java Rakstzīmju Klase</a> </li><li> <a href="/python-regex/">Python-Regex</a> </li><li> <a href="/get-advice/">Saņemiet Padomu</a> </li><li> <a href="/bit-magic/">Mazā maģija</a> </li><li> <a href="/python-numpy-arraycreation/">Python Numpy-Arraycreation</a> </li><li> <a href="/r-machine-learning/">R Mašīnmācība</a> </li><li> <a href="/best-10-cat/">Labākais 10</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">Arrays.sort() Java</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Masīva elementu kārtošanai tiek izmantota Java metode Arrays.sort().</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/arrays-sort-in-java"> <i class="fa fa-external-link"></i> Lasīt Vairāk</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interesanti Raksti</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/c-structures">C Struktūras</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-collections-addall-method">Java kolekcijas addAll() metode</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/verilog-gray-counter">Verilog pelēkais skaitītājs</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/getchar-function-c">getchar funkcija valodā C</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-csma-ca">Atšķirība starp CSMA CA un CSMA CD</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">Populārākas Posts</h2>
<div class="content">
<ul class="list"> <li><a href="/tenure-formula-excel">aprēķina termiņu programmā Excel</a>
</li><li><a href="/java-scanner">skeneris java</a>
</li><li><a href="/ranbir-kapoor">aktieris ranbir kapoor vecums</a>
</li><li><a href="/git-status">git statuss</a>
</li><li><a href="/mysql-show-users-list-all-users">mysql parādīt visus lietotājus</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 Visas Tiesības Aizsargātas | <a href="//lt.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atruna</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Par Mums</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privātuma 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>
