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="//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="/python-math-library/">Python Matematik-Bibliotek</a> </li><li> <a href="/linux-directories/">Linux Mapper</a> </li><li> <a href="/excel/">Excel</a> </li><li> <a href="/c-list-function/">C++ Listefunktion</a> </li><li> <a href="/photoshop-tutorial/">Photoshop Tutorial</a> </li><li> <a href="/sorting/">Sortering</a> </li><li> <a href="/kinematics/">Kinematik</a> </li><li> <a href="/python-math-library-functions/">Python Matematik-Bibliotek-Funktioner</a> </li><li> <a href="/technical-scripter-2018-cat/">Teknisk Scripter 2018</a> </li><li> <a href="/mobile-phone-review/">Anmeldelse Af Mobiltelefon</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">JavaScript String split() 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="/javascript-string-split-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="/top-10-most-popular-sports-canada">Top 10 mest populære sportsgrene i Canada</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/greater-than-symbol">Større end symbol</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/splunk-tutorial/">Splunk Tutorial</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/finding-the-number-of-triangles-amongst-horizontal-and-vertical-line-segments">Finde antallet af trekanter blandt vandrette og lodrette linjestykker</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/jquery-example">jQuery eksempel</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="/what-is-speaker">hvad er højttaler</a>
</li><li><a href="/bash-find">bash længde af snor</a>
</li><li><a href="/java-integer-class">java heltal</a>
</li><li><a href="/interface-java">grænseflade i java</a>
</li><li><a href="/how-generate-uuid-python">python generere uuid</a>
</li><li><a href="/java-instanceof">java er instans af</a>
</li><li><a href="/json-example">json i json eksempel</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="//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>
</body>
</html>