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="/technical-scripter-2022-cat/">Technical Scripter 2022</a> </li><li> <a href="/geometry-maq/">Geometri - Maq</a> </li><li> <a href="/java-timestamp-class/">Java Tidsstempel Klasse</a> </li><li> <a href="/aws-tutorial/">Aws Vejledning</a> </li><li> <a href="/top-10-list-world/">Top 10 Liste - Verden</a> </li><li> <a href="/gradle-tutorial/">Gradle Tutorial</a> </li><li> <a href="/bit-magic/">Bit magi</a> </li><li> <a href="/us-gk/">Us Gk</a> </li><li> <a href="/laws-motion/">Love-Of-Motion</a> </li><li> <a href="/mst/">Mst</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">Det er rigtigt</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Sana Makbul: Biografi, Alder med Mother Teresa, Narendra Modi, Mahatma Gandhi, Amitabh Bachchan, Humayun, Mangal Pandey Biografi osv.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/sana-makbul"> <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="/javascript-date-object">JavaScript-datoobjekt</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/html-button-disabled">HTML-knap deaktiveret</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-operator">Python ELLER operatør</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/reading-writing-json-file-python">Læsning og skrivning af JSON til en fil i Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/superscript-markdown">Superscript i Markdown</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="/java-string-length">streng af længde</a>
</li><li><a href="/coomeet-alternatives">hjemmeside som coomeet</a>
</li><li><a href="/xml-comments">xml kommentar</a>
</li><li><a href="/300-core-java-interview-questions-set-1">centrale java-interviewspørgsmål</a>
</li><li><a href="/matrix-multiplication-c">matrix multiplikation i c</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="//cs.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>