El método addEventListener() de la interfaz EventTarget configura una función que se llamará cada vez que el evento especificado se entregue al objetivo. Este método permite múltiples controladores de eventos en un elemento, lo que permite una gestión de interacción dinámica y flexible dentro de las aplicaciones web.
Sintaxis:
element.addEventListener(event, listener, useCapture);>
Parámetros:
- evento: El evento puede ser cualquier evento de JavaScript válido. Los eventos se usan sin prefijos, como usar click en lugar de onclick o mousedown en lugar de onmousedown.
- oyente (función de controlador): Puede ser una función de JavaScript que responde al evento que ocurre.
- utilizarCaptura: Es un parámetro opcional que se utiliza para controlar la propagación de eventos. Se pasa un valor booleano donde verdadero denota la fase de captura y FALSO denota la fase de burbujeo.
Ejemplo 1: En este ejemplo, mostraremos texto en la página web después de hacer clic en el botón.
HTML
Título del documento> encabezado> <body> <button id='try'>Haga clic aquí botón><h1 id='text'>h1><script>document.getElementById('try').addEventListener('click', function () { document.getElementById('text').innerText = 'techcodeview.com'; }); secuencia de comandos> cuerpo> html>></pre> </code> <p dir='ltr'> <b> <strong>Producción:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples.webp' alt="JavaScript addEventListener() con ejemplos"><p>JavaScript addEventListener() con ejemplos</p> <p dir='ltr'> <br> <b> <strong>Ejemplo 2:</strong> </b> <span>En este ejemplo, se agregan dos eventos mouseover y mouseout al mismo elemento. Si se pasa el cursor sobre el texto, se produce el evento de mouseover y se invoca la función RespondMouseOver, de manera similar, para el evento de mouseout, se invoca la función RespondMouseOut.</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>Título del documento> encabezado> <body> <button id='clickIt'>Haga clic aquí botón><p id='hoverPara'>Pase el cursor sobre este texto!p> <b id='effect'>b><script>const x = document.getElementById('clickIt'); const y = document.getElementById('hoverPara'); x.addEventListener('click', RespondClick); y.addEventListener('mouseover', RespondMouseOver); y.addEventListener('mouseout', RespondMouseOut); función RespondMouseOver() { document.getElementById('effect').innerHTML += 'MouseOver Event' + ' '; } función RespondMouseOut() { document.getElementById('effect').innerHTML += 'MouseOut Event' + ' '; } function RespondClick() { document.getElementById('effect').innerHTML += 'Evento de clic' + ' '; } script> cuerpo> html>></pre> </code> <p dir='ltr'> <b> <strong>Producción:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples-2.webp' alt="JavaScript addEventListener() con ejemplos"><p>JavaScript addEventListener() con ejemplos</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="">Categoría</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/python-tutorial/">Tutorial De Python</a> </li><li> <a href="/webtech-tools/">Herramientas Webtech</a> </li><li> <a href="/c-input-output-quiz/">C-Prueba De Entrada Y Salida</a> </li><li> <a href="/reactjs-tutorial/">Tutorial De Reacciónjs</a> </li><li> <a href="/list/">Lista De</a> </li><li> <a href="/graph-theory-tutorial/">Tutorial De Teoría De Grafos</a> </li><li> <a href="/cpp-advanced/">Cpp-Avanzado</a> </li><li> <a href="/algorithms-misc/">Algoritmos-Misceláneos</a> </li><li> <a href="/bash-script/">Bash-Script</a> </li><li> <a href="/layout-manager/">Administrador De Diseño</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">GIMP Guardar imagen como JPEG</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> GIMP Guarde la imagen como JPEG con lo que es gimp, gimp vs photoshop, instale gimp, menú de archivos de gimp, herramientas de gimp, tutorial de gimp, funciones de gimp, versiones de gimp, menú de selección, menú de visualización, menú de imágenes, etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/gimp-save-image-jpeg"> <i class="fa fa-external-link"></i> Leer Más</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Artículos De Interés</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/static-function-java">Función estática en Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/third-normal-form">Tercera forma normal (3NF)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/best-algebra-1-regents-review-guide-2023-1311008">La mejor guía de revisión de Regentes de Álgebra 1 2023</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/louise-penny-best-books-order">Louise Penny Mejores libros en orden</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/slope-secant-line-formula">Fórmula de la pendiente de la recta secante</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">Entradas Populares</h2>
<div class="content">
<ul class="list"> <li><a href="/difference-between-list">lista vs conjunto en java</a>
</li><li><a href="/java-programs-java-programming-examples">programa en java</a>
</li><li><a href="/typescript-arrow-function">función de flecha mecanografiada</a>
</li><li><a href="/c-array-structures">matriz de estructura en lenguaje c</a>
</li><li><a href="/java-convert-char-string">carácter java a cadena</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 Todos Los Derechos Reservados | <a href="//bg.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Descargo De Responsabilidad</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Acerca De Nosotros</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privacidad</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>