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="//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="">Kategori</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/coding-problems/">Kodingsproblemer</a> </li><li> <a href="/binary-representation/">Binær-Representasjon</a> </li><li> <a href="/quotes/">Sitater</a> </li><li> <a href="/java-examples/">Java Eksempler</a> </li><li> <a href="/jpa-tutorial/">Jpa Veiledning</a> </li><li> <a href="/r-matrix/">R-Matrise</a> </li><li> <a href="/bfs/">Bfs</a> </li><li> <a href="/minecraft-blogs/">Minecraft-Blogger</a> </li><li> <a href="/gta-5-cat/">Gta 5</a> </li><li> <a href="/big-endian/">Big Endian</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">Hvordan ser et godt anbefalingsbrev ut?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Når du får et anbefalingsbrev, hva gir et sterkt brev som støtter høyskolesøknaden din?</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/what-does-good-letter-recommendation-look-like-1311554"> <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="/disk-operating-system-commands">Kommandoer for diskoperativsystem</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/circles/">Sirkler</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/path-with-maximum-average-value">Sti med maksimal gjennomsnittsverdi</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/future-yearssat-test-dates-1311592">Fremtidige års SAT-testdatoer, tidsplaner og frister</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/transition-table">Overgangstabell</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="/how-split-strings-c">c++ delestreng</a>
</li><li><a href="/how-return-an-array-java">hvordan returnere en array java</a>
</li><li><a href="/multiplexer">multiplekser</a>
</li><li><a href="/objects-classes-java">objektiv java</a>
</li><li><a href="/java-string-replace">string java erstatning</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="//hr.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>
<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>