De addEventListener() metod i EventTarget-gränssnittet ställer in en funktion som kommer att anropas när den angivna händelsen levereras till målet. Denna metod tillåter flera händelsehanterare på ett element, vilket möjliggör dynamisk och flexibel interaktionshantering inom webbapplikationer.
Syntax:
element.addEventListener(event, listener, useCapture);>
Parametrar:
- händelse: händelse kan vara vilken som helst giltig JavaScript-händelse. Händelser används utan på prefix som att använda klicka istället för onclick eller mousedown istället för onmousedown.
- lyssnare (hanterarfunktion): Det kan vara en JavaScript-funktion som svarar på händelsen som inträffar.
- useCapture: Det är en valfri parameter som används för att kontrollera händelseutbredning. Ett booleskt värde skickas där Sann betecknar fångstfasen och falsk betecknar bubblingsfasen.
Exempel 1: I det här exemplet kommer vi att visa text på webbsidan efter att ha klickat på knappen.
HTML
Documenttitle> head> <body> <button id='try'>Klicka här 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>Produktion:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples.webp' alt="JavaScript addEventListener() med exempel"><p>JavaScript addEventListener() med exempel</p> <p dir='ltr'> <br> <b> <strong>Exempel 2:</strong> </b> <span>I det här exemplet läggs två händelser mouseover och mouseout till samma element. Om texten hålls över inträffar mouseover-händelse och funktionen RespondMouseOver anropas, på samma sätt för mouseout-händelse funktionen RespondMouseOut anropas.</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>Documenttitle> head> <body> <button id='clickIt'>Klicka här knappen><p id='hoverPara'>Håll muspekaren över denna text !p> <b id='effect'>b><script>const x = document.getElementById('clickIt'); const y = document.getElementById('hoverPara'); x.addEventListener('klick', 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('effekt').innerHTML += 'Klickhändelse' + ' '; } 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 exempel"><p>JavaScript addEventListener() med exempel</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-pandas-dataframe-methods/">Python Pandas-Dataframe-Metoder</a> </li><li> <a href="/cpp-pointer/">Cpp-Pekare</a> </li><li> <a href="/javafx-tutorial/">Javafx Handledning</a> </li><li> <a href="/quotes/">Citat</a> </li><li> <a href="/kinematics/">Kinematik</a> </li><li> <a href="/python-modules/">Python-Moduler</a> </li><li> <a href="/shortcut-keys/">Genvägstangenter</a> </li><li> <a href="/culture-gk/">Kultur Gk</a> </li><li> <a href="/angular-material/">Kantigt Material</a> </li><li> <a href="/java-util-package/">Java - Util-Paket</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">Hur man lägger till jQuery till HTML</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Hur man lägger till jQuery till HTML med html-handledning, taggar, anchor, img, div, entity, textarea, marquee, p-tagg, heading-tagg, h1, h2, tabell, formatering, attribut, element, ol, ul, Input Types, block elementtagg, inline-elementtagg, html-taggar, frastagg, head, body, form, listor, symboler etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-add-jquery-html"> <i class="fa fa-external-link"></i> Läs Mer</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Intressanta Artiklar</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/c-input-output/">C-Ingång-Utgång</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-much-is-100g-ml">Hur mycket är 100g i ml?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/undo-redo-vi-editor">Ångra och gör om i Vi-redigeraren</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-men">Skillnaden mellan män och människor</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/hiba-bukhari">Hiba Bukhari</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ära Inlägg</h2>
<div class="content">
<ul class="list"> <li><a href="/c-boolean">c booleskt</a>
</li><li><a href="/touch-command-linux-unix-with-examples">kommando touch i linux</a>
</li><li><a href="/sql-order-random">sql slumpvis ordning</a>
</li><li><a href="/java-string-isempty">java-strängen är tom</a>
</li><li><a href="/how-fix-it-when-your-mouse-scroll-is-not-working">rullhjulet fungerar inte</a>
</li><li><a href="/difference-between-network">nätverk och internet</a>
</li><li><a href="/java-convert-string-int">konvertera sträng till interger</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 Alla Rättigheter Förbehållna | <a href="//ja.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfriskrivning</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Oss</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Sekretesspolicy</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>