Manejo de Eventos en JavaScript: click, mouseOver y mouseOut

Clase 16 de 27 • Curso de JavaScript: Manipulación del DOM

Resumen

¿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');

container: Selecciona un div con la clase container.
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!

Jesús Alberto López Galindo

student•

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.

Santiago Perozo

student•

Muy buen aporte, es la manera mas sencilla y efectiva para lograr ese comportamiento.

Cristian Rodriguez Morales

student•

Sinceramente me aprovecho de que el curso está estructurado, y voy y aprendo por otro lado lo que neceisto. Con cursor me hago examenes, de js que el me revisa después y así voy a prendiendo

Orlando Alonso Gonzales Paz

student•

Estudien

// 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

student•

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:

<style>
  .container {
    width: 100%;
    height: 130px;
    background-color: red;
  }
</style>
<body>
  <main>
    <h2>Eventos!</h2>
    <div class="container">
      <p>Este es un texto que se oculta y aparece gracias a un evento de JS</p>
    </div>

    <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

Edwin Contreras

student•

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,})

marco contreras

student•

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

marco contreras

student•

me respondo hay una letra de mas por ahi pero busquenla jajaj es bueno encontrar nuestros propios errores jajja saludos chicos xD

Edwin Contreras

student•

En el segundo AddEventListener colocaste una i en Event

Luis Hernando Barreto Carvajal

student•

Para el concurso de soluciones más simples... button.addEventListener("click", () => {alert("El botón ha sido presionado.");}, { once: true });

Diego Peraza

student•

Mi humilde aporte:

Francisco Zuñiga

student•

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

student•

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 :

// 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){

&#x20; 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

student•

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";

});


```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)

Daniel Andres Rojas Paredes

student•

ODIO LA SECCION DE COMENTARIOS DE PLATZI, NUNCA ME SALE BIEN =(

Calvin Rafael Bobadilla Fernandez

student•

Cuando pegues codigo en un comentario, no lo envies inmediatamente, porque siempre se pega doble, me pasa tambien XDD, no se cuando lo arreglen pero de mientras, almenos le doy doublecheck antes de enviarlo

Victor R Vele

student•

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

student•

#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.

Manejo de Eventos en JavaScript: click, mouseOver y mouseOut

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

¿Cómo seleccionar elementos HTML con JavaScript?

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

¿Cómo manejar eventos de clic en botones?

¿Cómo retirar un evento previamente asignado?

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

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