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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <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 /> <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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/maths-calculators/">Wiskunde-Rekenmachines</a> </li><li> <a href="/nginx-tutorial/">Nginx-Zelfstudie</a> </li><li> <a href="/cell-signaling/">Cel-Signalering</a> </li><li> <a href="/accenture/">Accenture</a> </li><li> <a href="/calculus/">Berekening</a> </li><li> <a href="/news/">Nieuws</a> </li><li> <a href="/installation-ubuntu/">Installatie Op Ubuntu</a> </li><li> <a href="/discrete-mathematics/">Discrete Wiskunde</a> </li><li> <a href="/python-numpy-sorting-searching/">Python Numpy-Sorteren Zoeken</a> </li><li> <a href="/static-keyword/">Statisch Trefwoord</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Deskundige gids voor het AP-taal- en compositie-examen</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Vragen over het AP Taal- en Compositieexamen Engels? In onze complete gids vindt u alles wat u moet weten over de test.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/expert-guide-ap-language-1311408"> <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="/prime-numbers">Priemgetallen</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/top-50-most-common-powerful-last-names-us">Top 50 meest voorkomende en krachtige achternamen in de VS</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-timer-schedule-method">Java Timer-schema()-methode</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/numpy-asarray">numpy.asarray()</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/teenage-mutant-ninja-turtles-7-members-names-origin">Teenage Mutant Ninja Turtles 7 Namen van leden (oorsprong en betekenis)</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="/an-array-strings-c">reeks tekenreeksen in c</a>
</li><li><a href="/quick-access-toolbar">ms word snelle toegang werkbalk</a>
</li><li><a href="/css-transition-opacity">CSS-overgangsdekking</a>
</li><li><a href="/java-throw-exception">afhandeling van uitzonderingen in Java</a>
</li><li><a href="/masons-gain-formula">'metselaarsformule'</a>
</li><li><a href="/palindrome-program-c">palindroom nummer</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="//da.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>
</body>
</html>