De addEventListener()-methode van de EventTarget-interface stelt een functie in die wordt aangeroepen wanneer de opgegeven gebeurtenis bij het doel wordt afgeleverd. Deze methode maakt meerdere gebeurtenishandlers op een element mogelijk, waardoor dynamisch en flexibel interactiebeheer binnen webapplicaties mogelijk wordt.
Syntaxis:
element.addEventListener(event, listener, useCapture);>
Parameters:
- evenement: gebeurtenis kan elke geldige JavaScript-gebeurtenis zijn. Gebeurtenissen worden gebruikt zonder voorvoegsels, zoals het gebruik van click in plaats van onclick of mousedown in plaats van onmousdown.
- luisteraar (handlerfunctie): Het kan een JavaScript-functie zijn die reageert op de gebeurtenis die plaatsvindt.
- gebruikCapture: Het is een optionele parameter die wordt gebruikt om de voortplanting van gebeurtenissen te regelen. Waar wordt een Booleaanse waarde doorgegeven WAAR geeft de vangfase aan en vals geeft de borrelfase aan.
Voorbeeld 1: In dit voorbeeld tonen we tekst op de webpagina nadat we op de knop hebben geklikt.
HTML
Documenttitel> hoofd> <body> <button id='try'>Klik hierknop><h1 id='text'>h1><script>document.getElementById('proberen').addEventListener('klik', function () { document.getElementById('text').innerText = 'techcodeview.com'; }); script> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples.webp' alt="JavaScript addEventListener() met voorbeelden"><p>JavaScript addEventListener() met voorbeelden</p> <p dir='ltr'> <br> <b> <strong>Voorbeeld 2:</strong> </b> <span>In dit voorbeeld worden twee gebeurtenissen mouseover en mouseout aan hetzelfde element toegevoegd. Als er met de muis over de tekst wordt bewogen, vindt de mouseover-gebeurtenis plaats en wordt de RespondMouseOver-functie aangeroepen. Op dezelfde manier wordt voor de mouseout-gebeurtenis de RespondMouseOut-functie aangeroepen.</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>Documenttitel> hoofd> <body> <button id='clickIt'>Klik hierknop><p id='hoverPara'>Beweeg over deze tekst !p> <b id='effect'>b><script>const x = document.getElementById('clickIt'); const y = document.getElementById('hoverPara'); x.addEventListener('klik', RespondClick); y.addEventListener('mouseover', RespondMouseOver); y.addEventListener('mouseout', RespondMouseOut); functie RespondMouseOver() { document.getElementById('effect').innerHTML += 'MouseOver-gebeurtenis' + ' '; } functie RespondMouseOut() { document.getElementById('effect').innerHTML += 'MouseOut-gebeurtenis' + ' '; } functie RespondClick() { document.getElementById('effect').innerHTML += 'Klikgebeurtenis' + ' '; } script> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples-2.webp' alt="JavaScript addEventListener() met voorbeelden"><p>JavaScript addEventListener() met voorbeelden</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="//changelesschoir.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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/algorithms-insertionsort/">Algoritmen-Insertionsort</a> </li><li> <a href="/java-instant-class/">Java Instant-Klasse</a> </li><li> <a href="/javascript-questions/">Javascript-Vragen</a> </li><li> <a href="/converter-tools/">Converter-Hulpmiddelen</a> </li><li> <a href="/c-library/">C-Bibliotheek</a> </li><li> <a href="/python-turtle/">Python-Schildpad</a> </li><li> <a href="/java-generics/">Java-Generieken</a> </li><li> <a href="/java-overloading/">Java-Overbelasting</a> </li><li> <a href="/python-modules/">Python-Modules</a> </li><li> <a href="/cpp-string/">Cpp-String</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="//changelesschoir.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Linux-bestandssysteem</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Linux-bestandssysteem met voorbeelden van bestanden, mappen, toestemming, back-up, ls, man, pwd, cd, linux, linux introductie, chmod, man, shell, pipelines, filters, regex, vi etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/linux-file-system"> <i class="fa fa-external-link"></i> Lees Verder</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikelen</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/java-math-min-method">Java Math.min()-methode</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/swapping-operating-system">Wisselen van besturingssysteem</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-remove-punctuation-from-string">Python | Verwijder interpunctie uit de tekenreeks</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/ounces-kilogram-converter">Ons naar Kilogram Converter: OZ naar KG Calculator</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/git-create-branch-from-another-branch">Git – Maak een branch van een andere branch</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">Populaire Berichten</h2>
<div class="content">
<ul class="list"> <li><a href="/java-convert-string-int">java hoe tekenreeks naar int te converteren</a>
</li><li><a href="/how-git-undo-last-commit">laatste commit git verwijderen</a>
</li><li><a href="/python-programs-python-programming-examples">eenvoudig Python-programma</a>
</li><li><a href="/java-scanner">scanner-java</a>
</li><li><a href="/java-simpledateformat">eenvoudige datumformatter in Java</a>
</li><li><a href="/python-tkinter-button">tkinter-knop</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 Rechten Voorbehouden | <a href="//iw.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vrijwaring</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Wie Zijn Wij?</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privacybeleid</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>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>