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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <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 /> <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="">Categoría</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/jackson-tutorial/">Tutorial De Jackson</a> </li><li> <a href="/python-numpy-indexing/">Indexación Numpy De Python</a> </li><li> <a href="/python-datatype/">Tipo De Datos Python</a> </li><li> <a href="/c-inheritance/">C++-Herencia</a> </li><li> <a href="/geeks-premier-league-2023-cat/">Liga Premier De Frikis 2023</a> </li><li> <a href="/java-object-class/">Clase De Objeto Java</a> </li><li> <a href="/about-us/">Sobre Nosotros</a> </li><li> <a href="/commerce-difference-between/">Comercio - Diferencia Entre</a> </li><li> <a href="/physics/">Física</a> </li><li> <a href="/cpp-multithreading/">Cpp-Multiproceso</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Lista de matrices de Java</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Java ArrayList en colecciones Java con add, ejemplo de colección genérica versus no genérica, addAll, remove, removeAll, contiene, contieneAll, retainAll, métodos clear e iterador, colección genérica y no genérica.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/java-arraylist"> <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="/jfreechart-tutorial/">Tutorial De Jfreechart</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/fibonacci-series-c">Serie de Fibonacci en C</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-say-hello-italian-1311162">Cómo decir hola en italiano: 6 saludos comunes</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/10-best-free-audiobook-apps">Las 10 mejores aplicaciones gratuitas de audiolibros para Android (GRATIS)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/linear-programming">Programación lineal</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="/ternary-operator-java">operador ternario java</a>
</li><li><a href="/what-is-full-form-pvr">pvr de forma completa</a>
</li><li><a href="/python-constructor">constructor de Python</a>
</li><li><a href="/rakhi-sawant">rakhi sawant</a>
</li><li><a href="/merge-sort-algorithm">fusionar ordenamiento java</a>
</li><li><a href="/java-convert-boolean-string">cadena booleana java</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="//de.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>