De addEventListener() metod i EventTarget-gränssnittet ställer in en funktion som kommer att anropas när den angivna händelsen levereras till målet. Denna metod tillåter flera händelsehanterare på ett element, vilket möjliggör dynamisk och flexibel interaktionshantering inom webbapplikationer.
Syntax:
element.addEventListener(event, listener, useCapture);>
Parametrar:
- händelse: händelse kan vara vilken som helst giltig JavaScript-händelse. Händelser används utan på prefix som att använda klicka istället för onclick eller mousedown istället för onmousedown.
- lyssnare (hanterarfunktion): Det kan vara en JavaScript-funktion som svarar på händelsen som inträffar.
- useCapture: Det är en valfri parameter som används för att kontrollera händelseutbredning. Ett booleskt värde skickas där Sann betecknar fångstfasen och falsk betecknar bubblingsfasen.
Exempel 1: I det här exemplet kommer vi att visa text på webbsidan efter att ha klickat på knappen.
HTML
Documenttitle> head> <body> <button id='try'>Klicka här 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>Produktion:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples.webp' alt="JavaScript addEventListener() med exempel"><p>JavaScript addEventListener() med exempel</p> <p dir='ltr'> <br> <b> <strong>Exempel 2:</strong> </b> <span>I det här exemplet läggs två händelser mouseover och mouseout till samma element. Om texten hålls över inträffar mouseover-händelse och funktionen RespondMouseOver anropas, på samma sätt för mouseout-händelse funktionen RespondMouseOut anropas.</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>Documenttitle> head> <body> <button id='clickIt'>Klicka här knappen><p id='hoverPara'>Håll muspekaren över denna text !p> <b id='effect'>b><script>const x = document.getElementById('clickIt'); const y = document.getElementById('hoverPara'); x.addEventListener('klick', RespondClick); y.addEventListener('mouseover', RespondMouseOver); y.addEventListener('mouseout', RespondMouseOut); function RespondMouseOver() { document.getElementById('effect').innerHTML += 'MouseOver Event' + ' '; } funktion RespondMouseOut() { document.getElementById('effect').innerHTML += 'MouseOut Event' + ' '; } funktion RespondClick() { document.getElementById('effekt').innerHTML += 'Klickhändelse' + ' '; } script> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples-2.webp' alt="JavaScript addEventListener() med exempel"><p>JavaScript addEventListener() med exempel</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="/java-inner-class/">Java Inre Klass</a> </li><li> <a href="/time-complexity/">Tidskomplexitet</a> </li><li> <a href="/jquery-tutorial/">Självstudie För Jquery</a> </li><li> <a href="/animal-physiology/">Djurfysiologi</a> </li><li> <a href="/chemistry/">Kemi</a> </li><li> <a href="/java-character-class/">Java-Teckenklass</a> </li><li> <a href="/java-applet/">Java-Applet</a> </li><li> <a href="/java-arraylist/">Java-Arraylist</a> </li><li> <a href="/python-dictionary-programs/">Python Ordbok-Program</a> </li><li> <a href="/windows-errors/">Windows-Fel</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">Linux filsystem</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Linux filsystem med exempel på filer, kataloger, behörighet, säkerhetskopiering, ls, man, pwd, cd, linux, linux introduktion, chmod, man, shell, pipes, filter, regex, vi etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/linux-file-system"> <i class="fa fa-external-link"></i> Läs Mer</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Intressanta Artiklar</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/how-find-other-players-minecraft">Hur man hittar andra spelare i Minecraft</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/23-types-doctors-131964">23 typer av läkare och vad de gör</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/strings-c">Strängar i C++</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/addition-subtraction-using-1s-complement">Addition och subtraktion med 1:s komplement</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/html-script-tag">HTML-skripttagg</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ära Inlägg</h2>
<div class="content">
<ul class="list"> <li><a href="/interface-java">vad är ett gränssnitt</a>
</li><li><a href="/how-find-out-my-monitor-size">hur stor är min datorskärm</a>
</li><li><a href="/hadoop-tutorial">hadoop handledning</a>
</li><li><a href="/how-many-weeks-month">hur många veckor per månad</a>
</li><li><a href="/java-hashset">java hashset</a>
</li><li><a href="/difference-between-ice">skillnaden mellan is och snö</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 Alla Rättigheter Förbehållna | <a href="//ar.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfriskrivning</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Oss</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Sekretesspolicy</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>