Curso de JavaScript: Manipulación del DOM
Curso de JavaScript: Manipulación del DOM

Entendiendo el DOM

1

Manipulación del DOM con JavaScript y APIs

2

Entendiendo el DOM y su Manipulación con JavaScript

3

Diferencias entre el DOM y el objeto Window en JavaScript

Seleccionando y Accesando a Elementos del DOM

4

Selección de Elementos del DOM con JavaScript

5

Navegación Jerárquica del DOM en JavaScript

Manipulando Elementos del DOM

6

Atributos y Propiedades en HTML y su Manipulación con JavaScript

7

Modificar texto en HTML con JavaScript

8

Modificar Estilos CSS con JavaScript: Propiedad Style y ClassName

9

Uso de classList para Manipular Clases en Elementos HTML

10

Manipulación del DOM con innerHTML e InsertAdjacentHTML

11

Agregar elementos HTML sin reemplazar contenido existente

12

Creación y Manipulación de Elementos DOM con createElement

13

Eliminar Elementos del DOM con JavaScript: Métodos y Ejemplos

14

Clonación y Reemplazo de Elementos en JavaScript

Manipulando Eventos en el DOM

15

Eventos y Flujo en Programación Web: Capturing y Bubbling

16

Manejo de Eventos en JavaScript: click, mouseOver y mouseOut

17

Manipulación de Eventos en JavaScript para Interacción de Elementos

18

Validación de Formularios con JavaScript: Prevenir Comportamiento por Defecto

19

Delegation Pattern en JavaScript: Mejora de Eventos Click en Listas

Creando un Administrador de Tareas

20

Creación de un Task Manager con Persistencia usando Local Storage

21

Interactividad en Botones de Tareas: Borrar y Editar en JavaScript

22

Persistencia de Datos con Local Storage en Tareas Web

23

Guardado y edición de tareas en local storage con JavaScript

24

Manejo de Errores en Local Storage para Tareas Dinámicas

25

Cambio de Tema Dinámico y Persistente en Aplicaciones Web

26

Creación de Páginas Web Dinámicas con JavaScript

Asincronía en JavaScript

27

Programación Síncrona y Asíncrona en JavaScript

No tienes acceso a esta clase

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

Si ya tienes una cuenta,

Curso de JavaScript: Manipulación del DOM

Curso de JavaScript: Manipulación del DOM

Carlos Gonzales

Carlos Gonzales

Manejo de Eventos en JavaScript: click, mouseOver y mouseOut

16/27
Recursos

¿Cómo implementar eventos en JavaScript para manipular HTML?

El manejo de eventos es una parte esencial en el desarrollo web interactivo. Añadir eventos a elementos HTML te permitirá cambiar colores, textos o ejecutar funciones específicas cuando ocurran ciertas acciones, como clics o movimientos del mouse. En este artículo, te guiaré a través de un proceso detallado para implementar eventos en JavaScript, asegurando que tus aplicaciones web sean más dinámicas y receptivas.

¿Cómo seleccionar elementos HTML con JavaScript?

Para manipular elementos HTML con JavaScript, primero necesitas seleccionarlos. Aquí te muestro cómo hacerlo:

const container = document.querySelector('.container');
const button = document.querySelector('button');
  1. container: Selecciona un div con la clase container.
  2. button: Selecciona el único botón presente en el HTML.

¿Qué es addEventListener y cómo se utiliza?

addEventListener es un método que permite añadir eventos a elementos de la página. Aquí te explico cómo agregar un evento:

container.addEventListener('mouseover', () => {
  container.style.backgroundColor = 'blue';
});

container.addEventListener('mouseout', () => {
  container.style.backgroundColor = 'red';
});
  • mouseover: Cambia el color de fondo del contenedor a azul cuando el mouse pasa sobre él.
  • mouseout: Restaura el color original (rojo) cuando el mouse sale del contenedor.

¿Cómo manejar eventos de clic en botones?

El manejo de un evento de clic es fundamental para ejecutar acciones específicas:

button.addEventListener('click', () => {
  alert('Botón click');
});

Este código mostrará una alerta cada vez que se haga clic en el botón.

¿Cómo retirar un evento previamente asignado?

En ciertas situaciones, podrías necesitar retirar un evento para evitar que se ejecute de nuevo. Aquí te muestro cómo conseguirlo:

Primero, encapsula el callback en una función:

const buttonClickCallback = () => {
  alert('Botón click');
};

button.addEventListener('click', buttonClickCallback);

A continuación, usa removeEventListener dentro de un setTimeout para retirarlo después de un periodo de tiempo:

setTimeout(() => {
  button.removeEventListener('click', buttonClickCallback);
}, 2000);
  • setTimeout: Retira el evento de clic después de 2000 milisegundos (2 segundos).

¿Qué herramientas adicionales son útiles al trabajar con eventos?

A medida que avanzas en la manipulación de eventos, considerar el uso de Web APIs como setTimeout te permitirá controlar cuándo y cómo se ejecutan tus funciones en respuesta a los eventos.

Implementando estos pasos, podrás manejar eventos de manera efectiva en tus proyectos HTML con JavaScript, brindando una experiencia más interactiva y dinámica a los usuarios. ¡Sigue perfeccionando tus habilidades y transforma tus aplicaciones web!

Aportes 11

Preguntas 0

Ordenar por:

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

Jesús Alberto López Galindo

Jesús Alberto López Galindo

hace 8 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.
Orlando Alonso Gonzales Paz

Orlando Alonso Gonzales Paz

hace 7 meses
Estudien ```js // Seleccionamos el elemento con la clase 'container' del DOM y lo guardamos en la variable 'container' const container = document.querySelector(`.container`); // Seleccionamos el primer botón encontrado en el DOM y lo guardamos en la variable 'button' const button = document.querySelector(`button`); // **Agregar Event Listener para 'mouseover'** // Cuando el mouse pasa sobre el contenedor, el fondo cambia a color rosa. container.addEventListener(`mouseover`, () => { container.style.backgroundColor = "pink"; // Cambiamos el color del fondo a rosa. }); // **Agregar Event Listener para 'mouseout'** // Cuando el mouse sale del contenedor, el fondo vuelve a cambiar a rojo. container.addEventListener("mouseout", () => { container.style.backgroundColor = "red"; // Cambiamos el color del fondo a rojo. }); // button.addEventListener("click", () => { // alert("Presionaste el Boton o= no lo hagas!!"); // }); // **Manejador de evento de 'click' en el botón** // Esta función muestra una alerta cuando se hace clic en el botón. const buttonClickCallback = () => { alert("Button Clicked!"); }; // **Agregar Event Listener para 'click' en el botón** // Asignamos el evento 'click' al botón que ejecutará 'buttonClickCallback' al hacer clic. button.addEventListener("click", buttonClickCallback); // **Eliminar Event Listener después de un tiempo** // Después de 5 segundos, eliminamos el event listener de 'click' del botón. // Esto significa que después de ese tiempo, hacer clic en el botón no hará nada. setTimeout(() => { button.removeEventListener("click", buttonClickCallback); }, 5000); //OTRA MANERA: una vez que se dé click en el botón el evento queda desactivado. // const btnClickCallback = () => { // alert("Button clicked"); // button.removeEventListener('click', btnClickCallback); // } // button.addEventListener('click', btnClickCallback); ```
Diego Andrés Rojas Pinzón

Diego Andrés Rojas Pinzón

hace 8 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
marco contreras

marco contreras

hace 6 meses
hola chicos como estan, tengo una duda con el primer ejercicio, pasa que cuando paso el mouse cambia de color pero no regresa al color rojo que le tengo puesto con la otra funcion que se hace despues, dejo el codigo pero no se que pasa y lo he probado con dos navegadores, no se que puedo tener malo :( Saludos chicos ![](https://static.platzi.com/media/user_upload/image-ce2a184a-6b9f-4755-ba9a-bec4e9caa695.jpg)
Edwin Contreras

Edwin Contreras

hace 5 meses
Otra forma de hacer un evento único es usando el tercer parámetro de los addEventListener, los cuales son los options, si usamos el optional once podemos asignarle el valor true y asi solo tendra un solo uso `button.addEventListener('click', () => {  alert('Clicked!');}, {once: true,})`
Diego Peraza

Diego Peraza

hace 4 meses
Mi humilde aporte: ![](https://static.platzi.com/media/user_upload/image-d41a8f04-539a-450a-ab5e-f9cfecb56b12.jpg)
Pancho1995

Pancho1995

hace 4 meses
La clase se realiza en la consola para permitir una interacción inmediata y visualizar los resultados de manera directa. Esto es útil para aprender y experimentar rápidamente con el código sin necesidad de crear y guardar archivos. Sin embargo, es totalmente válido escribir el código en un archivo `.js`. Al hacerlo, puedes estructurar mejor tu proyecto y reutilizar el código en diferentes partes, lo que es más práctico en proyectos más grandes. Ambas formas son válidas; la elección depende del contexto y del objetivo de aprendizaje.
Bryan Andres Vera Garcia

Bryan Andres Vera Garcia

hace 6 meses
Algo que me parece importante es saber que no es posible ejecutar la función del addEventListener con un argumento, o al menos no es tan intuitivo.// Supongamos que tienes un botón en tu HTML: const myButton = document.getElementById("myButton"); Veamos el siguiente ejemplo : ```js // Supongamos que tienes un botón en tu HTML: const myButton = document.getElementById("myButton"); // Tenemos la siguiente constante const isValid = true; // Generamos la función que se ejecutara function myFunction(parametro){ console.log('Muestro el parametro ' + parametro) } // Generamos el addEventListener myButton.addEventListener('click',myFunction('isValid')) //Al tener esta estructura nuestra función nunca se ejecutara ``` Para poder pasar un parámetro adentro de la función callback del addEventListener debemos usar o una función anónima que llame a nuestra función una arrowFunction que haga lo mismo. ```js // Supongamos que tienes un botón en tu HTML: const myButton = document.getElementById("myButton"); // Tenemos la siguiente constante const isValid = true; // Generamos la función que se ejecutara function myFunction(parametro){ console.log('Muestro el parametro ' + parametro) } // Generamos el addEventListener myButton.addEventListener('click',function(){ myFunction(parametro) }) // Generamos el addEventListener con arrow function myButton.addEventListener('click',() => { myFunction(parametro) }) //De esta manera si se ejecutara nuestra función //Al tener esta estructura nuestra función nunca se ejecutara ```// Supongamos que tienes un botón en tu HTML: const myButton = document.getElementById("myButton"); // Tenemos la siguiente constante const isValid = true; // Generamos la función que se ejecutara function myFunction(paramtro){ console.log('Muestro el parametro ' + parametro) } // Generamos el addEventListener myButton.addEventListener('click',myFunction('isValid')) //Al tener esta estructura nuestra función nunca se ejecutara
Daniel Andres Rojas Paredes

Daniel Andres Rojas Paredes

hace 8 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

Victor R Vele

hace 8 meses
```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

Daniel Andres Rojas Paredes

hace 8 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.