Agregar y eliminar escuchadores de eventos o Event Listeners

Curso de JavaScript: Manipulación del DOM

Entendiendo el DOM

¿Para qué aprender JavaScript?

¿Qué es DOM y Window Object?

Explorando Nodos del DOM

Seleccionando y Accesando a Elementos del DOM

Consultando el DOM con getElementById y querySelector

Navegación efectiva entre nodos

Manipulando Elementos del DOM

Modificando atributos y propiedades

Modificando texto en HTML

Modificando estilos en HTML

Modificando la visibilidad de elementos HTML

Creación de elementos con HTML Strings e insertAdjacentElement()

Agregando elementos con innerHTML e insertAdjacentHTML()

Creación de elementos con createElement()

Remover elementos con remove() y removeChild()

Clonación y reemplazo de elementos con cloneNode y replaceChild

Manipulando Eventos en el DOM

Entendiendo eventos y tipos: Burbuja, Captura y Propagación

Agregar y eliminar escuchadores de eventos o Event Listeners

El objeto evento o eventObject

Manejo de entradas de formulario y validación

Delegación de eventos y prevención de comportamiento predeterminado

Creando un Administrador de Tareas

Añadir tareas desde un formulario

Eliminar y editar tareas del DOM

Almacenamiento y carga de datos en localStorage

Eliminar y editar tareas del almacenamiento local

Inspeccionando y solucionando errores en el código

Personalizando la interfaz del administrador de tareas

Aún hay más por aprender

Asincronía en JavaScript

¿Cómo funciona el JavaScript Engine?

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 5

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Yuliani Paoleth Alcántara Galindo

hace 2 meses

No me parece una solución realista utilizar setTimeout, ya que el tiempo en que el usuario hará click en el botón es impredecible, si no lo acciona antes de 2 segundos esa alerta nunca se va a disparar. Hay una solución mucho más simple: *const* btnClickCallback = () => { alert("Button clicked"); button.removeEventListener('click',btnClickCallback); } button.addEventListener('click', btnClickCallback); De esa manera una vez que se dé click en el botón el evento queda desactivado. Probablemente Diego quería mostrar la funcionalidad de setTimeout pero me parece que eligió un ejemplo poco coherente.

Diego Andrés Rojas Pinzón

hace 2 meses

Hola estube investigando mas informacion referente a eliminar los eventos pero cuando el evento se ejecuta una vez, hay varias opciones para manejarlo, una de ellas es como lo hizo el Profe con el setTimeout, pero siento yo que si el usuario no da click en ese intervalo de tiempo se genera una mala experiencia y no funcionaria, ademas adivinar cuanto tiempo se demorara el usuario en dar click es complicado, por eso les traigo estas dos alternativas, si las quieren probar adelante: el HTML: ```js <style> .container { width: 100%; height: 130px; background-color: red; } </style> <body> <main>

Eventos!

Este es un texto que se oculta y aparece gracias a un evento de JS

<button id="btn">Click me!</button> </main> <script src="main.js"></script> </body> ```la primera solucion es usando la porpiedad de Once en true, esta manera usa la opcion de once si se establece en `true`, el manejador de eventos se ejecutará solo una vez y luego se eliminará automáticamente: ```js const buttonClickCallback = () => { alert("Button Clicked!"); }; button.addEventListener("click", buttonClickCallback, {once: true}); ```y la segunda opcion "viable" es usar una funcion que me elimine el evento: ```js function handleClick(event) { alert("Button clicked!"); // Elimina el manejador de eventos después de ejecutarlo event.target.removeEventListener('click', handleClick); } button.addEventListener("click", handleClick); ```o simplemente usar: ```js button.addEventListener("click", () => { alert("Button clicked!"); }, {once: true}); ```son bienvenidas las correciones y o preguntas

Daniel Andres Rojas Paredes

hace 2 meses

hola, no se cuanto me demore como 2.5 horas sacando este codigo, pero tuve que leer documentacion sobre accesibilidad y tipos de eventos y entender quer era el focus y des confundirlo con las propiedades css del focus, y esto en teoria no se deberia hacer porque podria dañar la accesibilidad, en este caso creo que no lo asi asi que primero el codigo:container.addEventListener("focus",()=>{ container.style.backgroundColor = "grey"; }); container.addEventListener("blur",()=>{ container.style.backgroundColor = "salmon"; }); ```js container.addEventListener("focus",()=>{ container.style.backgroundColor = "grey"; }); container.addEventListener("blur",()=>{ container.style.backgroundColor = "salmon"; }); ```ahora la linea html importante ```js <section class="Events" tabindex="0"> ```y una bobadita de css ```js :focus-visible{ outline: 3px solid sandybrown; } ```ahora los resultados es que enfoco una seccion de texto y esta se cambia de color de fondo, y cuando la desenfoco vuelve a cambiar, el evento foco es independiente de dispositivo asi que se genera al navegar con pantallas tactiles, hacer click , o navegar por teclado por igual ![](https://static.platzi.com/media/user_upload/image-e104904b-c8b1-4e5b-92e2-3dea36bc93df.jpg) ![](https://static.platzi.com/media/user_upload/image-5efd7c2b-2bc0-42e9-bd27-66f444a0fd78.jpg)

Victor R Vele

hace un mes

```js const container = document.querySelector(".container"); // Selecciona el elemento con la clase 'container' const button = document.querySelector("button"); // Selecciona el botón container.addEventListener("mouseover", () => { container.style.backgroundColor = "blue"; // Cambia el color de fondo a azul cuando se pasa el mouse sobre 'container' }); container.addEventListener("mouseout", () => { container.style.backgroundColor = "red"; // Cambia el color de fondo a rojo cuando se quita el mouse de 'container' }); button.addEventListener("click", () => { alert("button clicked") }) ```const container = document.querySelector(".container"); // Selecciona el elemento con la clase 'container' const button = document.querySelector("button"); // Selecciona el botón container.addEventListener("mouseover", () => { container.style.backgroundColor = "blue"; // Cambia el color de fondo a azul cuando se pasa el mouse sobre 'container'}); container.addEventListener("mouseout", () => { container.style.backgroundColor = "red"; // Cambia el color de fondo a rojo cuando se quita el mouse de 'container'}); button.addEventListener("click", () => { alert("button clicked")})

Daniel Andres Rojas Paredes

hace 2 meses

\#Pildora de accecibilidad: los eventos de clik no seran simpre accesibles con la tecla enter, esto sucede cuando se asocian a texto plano o a divs, o celdas de tablas ( ya se quien aria estas barbaridades) existen varios tipos de eventos, que se pueden clasificar dentro de 2 categoria, device y non-divice dependent , los que no son dependientes del dispositivo, como los eventos de foco, son los mas recomendados por cuestiones de accesibilidad, en el caso de usar eventos dependientes del dispositivo, ademas de probarlos atravez de varios dispositivos (los eventos de clik entre comillas deberian funcionar con interfaces de mause teclado o tactiles pero no siembre), requeriran simplisidad en el diseño de la interfaz y html semantico y css bien escrito. si quieren entender un poco mejor esto de los eventos y su rol en la accesibilidad, les dejo este documento de `[web aim](https://webaim.org/techniques/javascript/eventhandlers)` Espero que funcione.