Anuncios

Bienvenidos sean a este post, hoy veremos contrario a addEventListener.

Anuncios

Este metodo lo mencionamos en este post pero no lo vimos en accion, hoy nos centraremos en el pero antes veamos como es su sintaxis:

objeto.removeEventListener(evento, funcion);
Anuncios
Anuncios

Este metodo nos permite retirar el evento que asignamos por medio de addEventListener pero al momento de hablar sobre este ultimo no contemplamos un detalle como es la funcion que debemos usar para remover y al momento de citar un ejemplo utilizamos a una funcion anonima lo cual nos dificultara realizar esta nueva accion, para evitar esto se puede hacer dos cosas, la primera es usar una funcion definida en otra parte o una funcion anonima asignada a una variable, vamos a utilizar este ultimo concepto mediante el siguiente ejemplo, les recomiendo crear una pagina de tipo HTML y agregar el siguiente codigo, no es necesario tener un servidor con hacerla en el escritorio y abrirla con el navegador bastara:

evento.html

<html>
<head>
<title>Metodo removeEventListener()</title>
</head>
<body>
<img id="foto" width="320" height="180" src="https://tinchicusplays.files.wordpress.com/2019/03/hollow-knight_20190304133915.jpg">
<div id="texto">Aqui veremos algo</div>
<button type="button" onclick="activar()">Activar eventos</button>
<button type="button" onclick="desactivar()">Desactivar eventos</button>
</body>
<script language="javascript">
	
let x, y, imagen, texto;

imagen = document.getElementById("foto");
texto = document.getElementById("texto");

function activar()
{
	imagen.addEventListener("mouseover", x = function()
		{
			texto.innerHTML = "Quitamelo, quitamelo!!";
		}, false);
	imagen.addEventListener("mouseout", y = function()
		{
			texto.innerHTML = "Uf, que alivio...";
		}, false);
}	
function desactivar()
{
	imagen.removeEventListener("mouseover", x);
	imagen.removeEventListener("mouseout", y);
	texto.innerHTML = "Aqui veremos algo";
}

</script>
</html>
Anuncios

Este es un ejemplo simple pero que nos resultara muy efectivo para entenderlo, en la parte del HTML simplemente tendremos una imagen (foto) para nuestro experimento, lo siguiente sera un DIV para mostrar un mensaje (texto) y por ultimo dos botones para activar y desactivar los eventos, observen que en ambos casos usamos a la vieja usanza donde si hacemos click sobre alguno de ellos procedera a llamar a la funcion que corresponda, esto es muy superficial pero tampoco tiene mucho misterio, veamos como queda esteticamente

Anuncios

Ahora pasemos a lo divertido como es el codigo del Javascript, para ello primero definiremos cuatro variables:

  • x, sera para el evento de mouse encima
  • y, sera para el evento de mouse afuera
  • imagen, sera para contener el elemento foto
  • texto, sera para contener el elemento texto
Anuncios

Las siguientes dos lineas seran para asignar los elementos a dos variables, la imagen la asignaremos por medio de getElementById a la variabe imagen, despues haremos lo mismo con el DIV de texto a la variable texto, veamos la primera funcion:

function activar()
{
	imagen.addEventListener("mouseover", x = function()
		{
			texto.innerHTML = "Quitamelo, quitamelo!!";
		}, false);
	imagen.addEventListener("mouseout", y = function()
		{
			texto.innerHTML = "Uf, que alivio...";
		}, false);
}
Anuncios
Anuncios

Esta funcion sera la que asignara dos eventos a la imagen que tenemos en el HTML, primero usaremos un addEventListener para asignar el evento mouseover, observen que usamos una funcion anomina pero se la asignamos a la variable x que declaramos al comienzo, esta a su vez escribira un mensaje en el DIV de texto, volvemos a hacer lo mismo pero esta vez con el evento mouseout y la funcion anomina la asignaremos a la variable y, ahora nuestra imagen mostrara dos mensajes cuando pasemos o salgamos de la imagen, veamos la siguiente funcion:

function desactivar()
{
	imagen.removeEventListener("mouseover", x);
	imagen.removeEventListener("mouseout", y);
	texto.innerHTML = "Aqui veremos algo";
}
Anuncios
Anuncios

Esta funcion sera para desactivar los eventos, para ello usaremos al metodo removeEventListener pero observen como lo hacemos primero pasaremos el evento que deseamos remover y luego la funcion que esta relacionada a ese evento, por esta razon si usan una funcion anonima deben asignarla a una variable y lo mas global posible para que sea accedida desde cualquier lugar, sino tambien pueden usar funciones normales pero recuerden que solamente con funciones identificadas este metodo funcionara, por ultimo reestablecemos el mensaje original, con todo esto comentado veamos como trabaja mediante el siguiente video

Anuncios

Como pueden ver en el video primero no sucede nada cuando pasamos el mouse sobre la imagen,, en cambio cuando activamos los eventos si empezamos a ver los mensajes cuando pasamos o salimos de la imagen, y por ultimo cuando desactivamos los eventos, todo vuelve como al comienzo.

Anuncios

En resumen, hoy hemos visto a removeEventListener, que es, para que sirve, como es su sintaxis, un ejemplo practico para verlo en accion y si tienen en consideracion lo mencionado en el post siempre funcionara perfectamente, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Anuncios
pp258

Donación

Es para mantenimento del sitio, gracias!

$1.50