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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <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 /> <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="/c-set-function/">C++ Inställd Funktion</a> </li><li> <a href="/cpp-algorithm-library/">Cpp-Algoritm-Bibliotek</a> </li><li> <a href="/java-arraylist/">Java-Arraylist</a> </li><li> <a href="/c-keyword/">C Nyckelord</a> </li><li> <a href="/algorithms-misc/">Algoritmer - Övrigt</a> </li><li> <a href="/installation-mac/">Installation På Mac</a> </li><li> <a href="/ooad-object-oriented-analysis/">Ooad - Objektorienterad Analys Och Design</a> </li><li> <a href="/coding-problems/">Kodningsproblem</a> </li><li> <a href="/python-dsa/">Python-Dsa</a> </li><li> <a href="/math-queries/">Math-Frågor</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">De 8 grundläggande Oxens egenskaper, förklarade</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Hur är Oxens personlighet? Vi förklarar de viktigaste Oxens egenskaper och egenskaper för att hjälpa dig förstå detta jordtecken.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/8-fundamental-taurus-traits-131172"> <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="/python-os-makedirs-method">Python | os.makedirs() metod</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/context-free-grammar">Kontextfri grammatik (CFG)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/neighbouring-countries-india-full-list">Indiens grannländer – fullständig lista</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-apache-zookeeper">Vad är Apache ZooKeeper?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/types-routing">Typer av routing</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="/singleton-design-pattern-java">singleton designmönster java</a>
</li><li><a href="/difference-between-delete">trunkera och ta bort skillnaden</a>
</li><li><a href="/get-current-date-time-java">java få aktuellt datum</a>
</li><li><a href="/java-convert-char-string">hur man konverterar char till string java</a>
</li><li><a href="/postorder-traversal">postorder traversal</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="//ro.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>