De addEventListener()-metoden av EventTarget-grensesnittet setter opp en funksjon som vil bli kalt når den angitte hendelsen leveres til målet. Denne metoden tillater flere hendelsesbehandlere på et element, noe som muliggjør dynamisk og fleksibel interaksjonsadministrasjon i webapplikasjoner.
Syntaks:
element.addEventListener(event, listener, useCapture);>
Parametere:
- begivenhet: hendelse kan være en hvilken som helst gyldig JavaScript-hendelse. Hendelser brukes uten på prefikser som å bruke klikk i stedet for onclick eller mousedown i stedet for onmousedown.
- lytter (behandlerfunksjon): Det kan være en JavaScript-funksjon som reagerer på hendelsen som inntreffer.
- useCapture: Det er en valgfri parameter som brukes til å kontrollere utbredelse av hendelser. En boolsk verdi sendes hvor ekte betegner fangstfasen og falsk betegner boblefasen.
Eksempel 1: I dette eksemplet vil vi vise tekst på nettsiden etter å ha klikket på knappen.
HTML
Dokumenttittel> hode> <body> <button id='try'>Klikk her-knappen><h1 id='text'>h1><script>document.getElementById('try').addEventListener('click', function () { document.getElementById('text').innerText = 'techcodeview.com'; }); script> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produksjon:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples.webp' alt="JavaScript addEventListener() med eksempler"><p>JavaScript addEventListener() med eksempler</p> <p dir='ltr'> <br> <b> <strong>Eksempel 2:</strong> </b> <span>I dette eksemplet legges to hendelser mouseover og mouseout til det samme elementet. Hvis teksten holdes over, oppstår mouseover-hendelse og RespondMouseOver-funksjonen påkalles, på samme måte for mouseout-hendelse. RespondMouseOut-funksjonen påkalles.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Dokumenttittel> hode> <body> <button id='clickIt'>Klikk her-knappen><p id='hoverPara'>Hold markøren over denne teksten !p> <b id='effect'>b><script>const x = document.getElementById('clickIt'); const y = document.getElementById('hoverPara'); x.addEventListener('klikk', RespondClick); y.addEventListener('mouseover', RespondMouseOver); y.addEventListener('mouseout', RespondMouseOut); function RespondMouseOver() { document.getElementById('effect').innerHTML += 'MouseOver Event' + ' '; } funksjonen RespondMouseOut() { document.getElementById('effect').innerHTML += 'MouseOut Event' + ' '; } funksjonen RespondClick() { document.getElementById('effect').innerHTML += 'Klikk Event' + ' '; } script> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produksjon:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples-2.webp' alt="JavaScript addEventListener() med eksempler"><p>JavaScript addEventListener() med eksempler</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="">Kategori</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/misc/">Misc</a> </li><li> <a href="/java-collections/">Java-Samlinger</a> </li><li> <a href="/cricket/">Siriss</a> </li><li> <a href="/analysis-of-algorithms/">Analyse av algoritmer</a> </li><li> <a href="/java-priority-queue/">Java-Prioritet-Kø</a> </li><li> <a href="/history-gk/">Historie Gk</a> </li><li> <a href="/random-algorithms/">Tilfeldige Algoritmer</a> </li><li> <a href="/dsa-tutorials/">Dsa-Veiledninger</a> </li><li> <a href="/design-patterns/">Design Mønstre</a> </li><li> <a href="/html-tutorial/">Html Opplæring</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">Programmer for å skrive ut pyramidemønstre i Java</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Denne artikkelen er rettet mot å gi en Java-implementering for mønsterutskrift.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/programs-for-printing-pyramid-patterns-in-java"> <i class="fa fa-external-link"></i> Les Mer</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikler</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/how-rename-file-linux-rename-command">Hvordan gi nytt navn til fil i Linux | gi nytt navn til kommando</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/restart-apache-ubuntu">Start Apache Ubuntu på nytt</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-negative-plus-negative">Hva er negativt pluss negativt?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/blogathon-2021-cat/">Blogathon-2021</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/story-an-hour-131370">Historien om en time: Sammendrag og analyse</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ære Innlegg</h2>
<div class="content">
<ul class="list"> <li><a href="/what-is-monitor">hva er en monitor</a>
</li><li><a href="/sql-order-random">tilfeldig rekkefølge sql</a>
</li><li><a href="/difference-between-dinner">forskjellen mellom middag og kveldsmat</a>
</li><li><a href="/compatibility-testing">kompatibilitetstesting</a>
</li><li><a href="/c-strings">streng i c</a>
</li><li><a href="/java-break-statement">java for pause</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 Alle Rettigheter Reservert | <a href="//ca.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfraskrivelse</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Oss</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Personvernerklæring</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>