Det addEventListener() metode af EventTarget-grænsefladen opsætter en funktion, der vil blive kaldt, når den angivne hændelse leveres til målet. Denne metode tillader flere hændelseshandlere på et element, hvilket muliggør dynamisk og fleksibel interaktionsstyring inden for webapplikationer.
Syntaks:
element.addEventListener(event, listener, useCapture);>
Parametre:
- begivenhed: begivenhed kan være enhver gyldig JavaScript-begivenhed. Hændelser bruges uden på præfikser som at bruge klik i stedet for onclick eller mousedown i stedet for onmousedown.
- lytter(handlerfunktion): Det kan være en JavaScript-funktion, der reagerer på hændelsen.
- useCapture: Det er en valgfri parameter, der bruges til at styre hændelsesudbredelse. En boolesk værdi sendes hvor rigtigt betegner indfangningsfasen og falsk betegner boblende fase.
Eksempel 1: I dette eksempel vil vi vise tekst på websiden efter at have klikket på knappen.
HTML
Dokumenttitel> hoved> <body> <button id='try'>Klik her knap><h1 id='text'>h1><script>document.getElementById('try').addEventListener('klik', funktion () { 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 eksempler"><p>JavaScript addEventListener() med eksempler</p> <p dir='ltr'> <br> <b> <strong>Eksempel 2:</strong> </b> <span>I dette eksempel føjes to begivenheder mouseover og mouseout til det samme element. Hvis teksten holdes over, opstår mouseover-hændelsen, og funktionen RespondMouseOver påkaldes, på samme måde for mouseout-hændelsen.</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>Dokumenttitel> hoved> <body> <button id='clickIt'>Klik her knap><p id='hoverPara'>Hold markøren over denne tekst !p> <b id='effect'>b><script>const x = document.getElementById('klik på det'); const y = document.getElementById('hoverPara'); x.addEventListener('klik', 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('effect').innerHTML += 'Click Event' + ' '; } 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 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="/analog-communication/">Analog Kommunikation</a> </li><li> <a href="/mensuration-3d/">3D Måling</a> </li><li> <a href="/c-map-function/">C++ Kortfunktion</a> </li><li> <a href="/technical-scripter-2020-cat/">Technical Scripter 2020</a> </li><li> <a href="/computer-graphics/">Computer Grafik</a> </li><li> <a href="/sql-clauses/">Sql-Klausuler</a> </li><li> <a href="/python-numpy-arraymanipulation/">Python Numpy-Arraymanipulation</a> </li><li> <a href="/binary-search-tree/">Binært søgningstræ</a> </li><li> <a href="/python-pil/">Python-Pille</a> </li><li> <a href="/java-string-programs/">Java-Streng-Programmer</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">Python os.chdir() metode</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> En datalogiportal for nørder. Den indeholder velskrevne, gennemtænkte og velforklarede datalogi- og programmeringsartikler, quizzer og spørgsmål om praksis/konkurrencedygtig programmering/virksomhedsinterview.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/python-os-chdir-method"> <i class="fa fa-external-link"></i> Læs Mere</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="/structure-java-program">Java-programmets struktur</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-lock-formulas-excel">Sådan låser du formler i Excel</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-check-python-version">Sådan kontrolleres Python-version: Windows, Linux og Mac</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/propositional-logic">Propositionel logik</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/javascript-addeventlistener">JavaScript addEventListener()</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 Indlæg</h2>
<div class="content">
<ul class="list"> <li><a href="/javascript-queryselector">forespørgselsvælger</a>
</li><li><a href="/avl-tree">avl trærotation</a>
</li><li><a href="/difference-between-baseband">basebånd vs bredbånd</a>
</li><li><a href="/myflixer-alternatives">myflixr</a>
</li><li><a href="/how-sort-arraylist-java">arraylist.sort</a>
</li><li><a href="/sql-cast-function">støbt sql</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 Rettigheder Forbeholdes | <a href="//ja.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 Os</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privatlivspolitik</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>