Contenidos
Clic en Addeventlistener
</html>En el ejemplo anterior, añadimos otro escuchador de eventos para el mismo evento en el mismo botón.Una vez que se dispare la primera alerta y la cerremos, se disparará la segunda.Cómo añadir diferentes escuchadores de eventos en el mismo elemento
El tercer argumento opcional del escuchador de eventos determina el orden de los elementos anidados cuando se produce un evento.Por ejemplo, si el usuario hace clic en un elemento <b>botón</b> dentro de un elemento <b>div</b>, qué evento de clic del elemento debe dispararse primero.Si especificamos true, el método addEventListener() utilizará la captura, de lo contrario utilizará el burbujeo.Entonces, ¿cuál es la diferencia entre la captura y el burbujeo:Ejemplo:
</html>Fíjate en el orden en el que se disparan las alertas al hacer clic en uno de los botones.Cuando hacemos clic en el botón de captura, se gestiona primero el evento del div exterior. Cuando hacemos clic en el botón de burbujeo, se maneja primero el evento del botón interior.En la mayoría de los casos queremos el burbujeo, por eso es el predeterminado y no hay que especificarlo.Cómo eliminar un oyente de eventos
Tipos de oyentes de eventos
Un manejador de eventos es una función que se ejecuta cuando se dispara un evento en una página web. Los escuchadores de eventos conectan una función de evento a un elemento HTML, de modo que cuando esa función se ejecuta, el elemento web cambia.
Hasta ahora, no está sucediendo mucho. Nuestra página web contiene un botón que debería hacer algo cuando hacemos clic en nuestro botón. Cuando hacemos clic en nuestro botón, no pasa nada. Esto se debe a que todavía tenemos que escribir nuestro manejador de eventos.
En un manejador en línea, necesitas especificar qué función quieres ejecutar en tu archivo HTML. En nuestro código HTML de antes, esta línea es donde definimos la función que queríamos llamar cuando nuestro botón fuera presionado:
Nuestro botón funciona de la misma manera que antes, pero nuestro código está escrito de una manera diferente. En lugar de escribir nuestros manejadores de eventos en línea, los hemos movido a nuestro archivo main.js. Esto nos ayuda a escribir un código más fácil de mantener porque no necesitamos leer todo nuestro código HTML para encontrar dónde se activan nuestros eventos en línea.
Por ejemplo, cuando haces clic en un botón que está unido a un receptor de eventos, el receptor “escuchará” que se ha disparado un evento del ratón. Entonces ejecutará el código que hayas asociado a ese oyente de eventos en particular.
Clase Addeventlistener javascript
Ten en cuenta que dentro de onclick usamos comillas simples, porque el propio atributo está entre comillas dobles. Si olvidamos que el código está dentro del atributo y usamos comillas dobles dentro, como esto: onclick=”alert(“Click!”)”, entonces no funcionará bien.
Si añadimos paréntesis, entonces sayThanks() se convierte en una llamada a una función. Así que la última línea en realidad toma el resultado de la ejecución de la función, que es indefinido (ya que la función no devuelve nada), y lo asigna a onclick. Eso no funciona.
Los desarrolladores de los estándares web lo entendieron hace tiempo y sugirieron una forma alternativa de gestionar los manejadores utilizando métodos especiales addEventListener y removeEventListener. Están libres de este problema.
Elemento que maneja el evento. Es exactamente lo mismo que esto, a menos que el manejador sea una función de flecha, o su esto esté ligado a algo más, entonces podemos obtener el elemento desde event.currentTarget.
Hay más propiedades. Muchas de ellas dependen del tipo de evento: los eventos de teclado tienen un conjunto de propiedades, los eventos de puntero – otro, los estudiaremos más adelante cuando lleguemos a los diferentes eventos en detalle.
Addeventlistener
Añadir un listener de eventos a todos los elementos con clase usando JSBorislav HadzhievFri Dec 31 2021-2 min readFoto de Jake MelaraAñadir un listener de eventos a todos los elementos con clase usando JS #Para añadir un listener de eventos a todos los elementos con clase:Aquí está el HTML de los ejemplos de este artículo.index.html¡Copiado!<!DOCTYPE html>
en cada elemento de la colección.El método addEventListener toma 2 argumentos:La función del ejemplo se invoca cada vez que se hace clic en el elemento y añade la propiedad de estilo en el elemento, estableciendo su color de fondo a amarillo.Un enfoque alternativo, pero también muy común es utilizar el bucle for…of para