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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <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 /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <br> <br></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-numpy-mathematical-function/">Python Numpy-Matematisk Funktion</a> </li><li> <a href="/calculus/">Regning</a> </li><li> <a href="/china-gk/">Kina Gk</a> </li><li> <a href="/postman-tutorial/">Postmand Tutorial</a> </li><li> <a href="/hadoop-tutorial/">Hadoop Tutorial</a> </li><li> <a href="/number-system-maq/">Nummersystem - Maq</a> </li><li> <a href="/python-oop/">Python-Oop</a> </li><li> <a href="/python-string-programs/">Python Streng-Programmer</a> </li><li> <a href="/amazon/">Amazon</a> </li><li> <a href="/data-science/">Data-Videnskab</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">SAT-gebyrer og registrering: Hvad er de samlede omkostninger ved SAT?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Hvor meget koster SAT-testen? Hvor meget i gebyr betaler du for registrering og ekstra ydelser? Se de samlede omkostninger her.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/sat-fees-registration-131644"> <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="/what-is-priority-queue-introduction-priority-queue">Hvad er Priority Queue | Introduktion til Priority Queue</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/different-ways-to-copy-a-vector-in-c">Forskellige måder at kopiere en vektor i C ++</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/apt-get-command-linux-with-examples">apt-get kommando i Linux med eksempler</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-change-legend-title-ggplot2-r">Hvordan ændres legendetitel i ggplot2 i R?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-install-pandas-python">Hvordan installeres pandaer i Python?</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-full-form-mit">mit fulde form</a>
</li><li><a href="/rename-folder-linux">omdøb mappe på linux</a>
</li><li><a href="/rename-folder-linux">linux hvordan man omdøber en mappe</a>
</li><li><a href="/how-enable-disable-developer-options-android">deaktivering af udviklertilstand for Android</a>
</li><li><a href="/kat-timpf">kat timpf vægt</a>
</li><li><a href="/difference-between-object">klasse vs objekt i java</a>
</li><li><a href="/c-boolean">boolsk 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="//de.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>