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="//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="/euler-totient/">Euler-Totient</a> </li><li> <a href="/amendment/">Grozījumi</a> </li><li> <a href="/testng-tutorial/">Testng Apmācība</a> </li><li> <a href="/python/">Pitons</a> </li><li> <a href="/c-pointers/">C Rādītāji</a> </li><li> <a href="/java-multithreading/">Java Daudzpavedienu Veidošana</a> </li><li> <a href="/number-system-maq/">Numuru Sistēma - Maq</a> </li><li> <a href="/best-apps/">Labākās Lietotnes</a> </li><li> <a href="/python-oop/">Python-Oop</a> </li><li> <a href="/geeks-premier-league-2023-cat/">Geeks Premjerlīga 2023</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">Diska operētājsistēmas komandas</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Diska operētājsistēmas komandas ar OS apmācību, OS veidi, procesu pārvaldība, procesa atribūti, CPU plānošana, FCFS ar pieskaitāmajām izmaksām, FCFS plānošana utt.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/disk-operating-system-commands"> <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="/yaml-tutorial/">Yaml Apmācība</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/numpy-mean-python">numpy.mean() Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/science-gk/">Zinātne Gk</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/different-ways-print-exception-message-java">Dažādi veidi, kā drukāt izņēmuma ziņojumu Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/golo-diet-review">GOLO diētas apskats (2024): izmaksas, ieguvumi un daudz kas cits</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="/k-nearest-neighbor-algorithm">knn</a>
</li><li><a href="/java-oops-concepts">ups jēdzieni</a>
</li><li><a href="/java-convert-char-int">pārvērst char par int java</a>
</li><li><a href="/what-is-0-2-fraction">0,2 kā daļa</a>
</li><li><a href="/java-if-else-statement">if-else paziņojums 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 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>
</body>
</html>
