De addEventListener()-metoden av EventTarget-grensesnittet setter opp en funksjon som vil bli kalt når den angitte hendelsen leveres til målet. Denne metoden tillater flere hendelsesbehandlere på et element, noe som muliggjør dynamisk og fleksibel interaksjonsadministrasjon i webapplikasjoner.
Syntaks:
element.addEventListener(event, listener, useCapture);>
Parametere:
- begivenhet: hendelse kan være en hvilken som helst gyldig JavaScript-hendelse. Hendelser brukes uten på prefikser som å bruke klikk i stedet for onclick eller mousedown i stedet for onmousedown.
- lytter (behandlerfunksjon): Det kan være en JavaScript-funksjon som reagerer på hendelsen som inntreffer.
- useCapture: Det er en valgfri parameter som brukes til å kontrollere utbredelse av hendelser. En boolsk verdi sendes hvor ekte betegner fangstfasen og falsk betegner boblefasen.
Eksempel 1: I dette eksemplet vil vi vise tekst på nettsiden etter å ha klikket på knappen.
HTML Dokumenttittel> hode> <body> <button id='try'>Klikk her-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>Produksjon:</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 eksemplet legges to hendelser mouseover og mouseout til det samme elementet. Hvis teksten holdes over, oppstår mouseover-hendelse og RespondMouseOver-funksjonen påkalles, på samme måte for mouseout-hendelse. RespondMouseOut-funksjonen påkalles.</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>Dokumenttittel> hode> <body> <button id='clickIt'>Klikk her-knappen><p id='hoverPara'>Hold markøren over denne teksten !p> <b id='effect'>b><script>const x = document.getElementById('clickIt'); const y = document.getElementById('hoverPara'); x.addEventListener('klikk', RespondClick); y.addEventListener('mouseover', RespondMouseOver); y.addEventListener('mouseout', RespondMouseOut); function RespondMouseOver() { document.getElementById('effect').innerHTML += 'MouseOver Event' + ' '; } funksjonen RespondMouseOut() { document.getElementById('effect').innerHTML += 'MouseOut Event' + ' '; } funksjonen RespondClick() { document.getElementById('effect').innerHTML += 'Klikk Event' + ' '; } script> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produksjon:</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="/java-throwable-class/">Java-Kastbare Klasse</a> </li><li> <a href="/physical-quantities/">Fysisk-Mengder</a> </li><li> <a href="/counting-sort/">Telle-Sort</a> </li><li> <a href="/cyber-security-tutorial/">Veiledning For Cybersikkerhet</a> </li><li> <a href="/online-game-tools/">Online-Spill-Verktøy</a> </li><li> <a href="/maths-class-12-cat/">Matte-Klasse-12</a> </li><li> <a href="/python-pandas-dataframe-methods/">Python Pandas-Dataframe-Metoder</a> </li><li> <a href="/differences/">Forskjeller</a> </li><li> <a href="/chemical-bonding/">Kjemisk-Binding</a> </li><li> <a href="/cpp-input-output/">Cpp-Inngang-Utgang</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Combinatorial Game Theory | Sett 4 (Sprague - Grundy Theorem)</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Forutsetninger: Grundy tall/tall, og Mexwe har allerede sett i sett 2 (https://www.geeksforgeeks.org/dsa/combinatorial-game-theory-set-2-game-nim/), at vi kan finne hvem som vinner i et spill. Denne gangen kan hver spiller bare fjerne bare 1, 2 eller 3 steiner (og ikke et antall steiner som i det klassiske spillet NIM). Kan vi forutsi hvem som vil vinne? Ja, vi kan forutsi vinneren ved å bruke Sprague-Grundy Teorem.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/combinatorial-game-theory-set-4-sprague-grundy-theorem"> <i class="fa fa-external-link"></i> Les Mer</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="/c-stl-set">C++ STL-sett</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/static-method-java-with-examples">Statisk metode i Java med eksempler</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/html-attributes/">Html-Attributter</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/upcasting-vs-downcasting-java">Upcasting vs downcasting i Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/counting-sort/">Telle-Sort</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 Innlegg</h2>
<div class="content">
<ul class="list"> <li><a href="/methods-mockito">mockito når som helst</a>
</li><li><a href="/steps-write-execute-script">kjører skript i linux</a>
</li><li><a href="/best-smile-world">vakreste smilet</a>
</li><li><a href="/how-find-out-my-monitor-size">hvordan finne skjermstørrelsen</a>
</li><li><a href="/java-comparable-interface">sammenlignbar liste</a>
</li><li><a href="/selection-sort-java">utvalg sort java</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 Rettigheter Reservert | <a href="//sr.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 Oss</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Personvernerklæring</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>