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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <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 /> <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="/python-utility/">Python-Utilīta</a> </li><li> <a href="/agile-tutorial/">Agile Apmācība</a> </li><li> <a href="/alphabet/">Alfabēts</a> </li><li> <a href="/maven-tutorial/">Maven Apmācība</a> </li><li> <a href="/angular-material/">Leņķiskais Materiāls</a> </li><li> <a href="/combinatorial/">Kombinatorisks</a> </li><li> <a href="/tally-tutorial/">Tally Apmācība</a> </li><li> <a href="/javascript-dsa/">Javascript — Dsa</a> </li><li> <a href="/law/">Likums</a> </li><li> <a href="/physics-class-10-cat/">Fizika-10. Klase</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">SQL servera darījums</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> SQL servera darījums ar SQL serveri, instalējiet Visual Studio, instalējiet sql serveri, arhitektūru, pārvaldības studiju, datu tipus, db operācijas, pieteikšanās datu bāzi, izveidojiet datu bāzi, atlasiet datu bāzi, nomest datu bāzi, izveidojiet tabulu, dzēsiet tabulu, atjauniniet tabulu, min funkcija, max funkcija, summas funkcija, sql operatori, avansa operators, klauzulas, skata izveide, atslēgu ierobežojumi un indeksi, primārās atslēgas, ārējās atslēgas, indeksi utt.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/sql-server-transaction"> <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="/examples-ai-artificial-intelligence">AI mākslīgā intelekta piemēri</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/curl-command-linux-with-examples">curl komanda operētājsistēmā Linux ar piemēriem</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/iterate-over-an-array-javascript">Atkārtojiet masīvu JavaScript</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/explained-what-is-snap-map-242116">Paskaidrots: kas ir Snap Map?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/matplotlib-pyplot-savefig-python">Matplotlib.pyplot.savefig() programmā Python</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="/java-convert-int-string">vesels skaitlis līdz virknei</a>
</li><li><a href="/java-math-min-method">java math.min</a>
</li><li><a href="/c-int-string">c++ int uz virkni</a>
</li><li><a href="/how-remove-last-character-from-string-java">noņemiet pēdējo rakstzīmi no virknes</a>
</li><li><a href="/123movie-alternatives">filmas123 līdz</a>
</li><li><a href="/java-convert-char-int">no rakstzīmes uz int java</a>
</li><li><a href="/default-parameter-java">java noklusējuma parametri</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="//sl.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>
