Asignación de eventos. Limpiar el html de JS en línea

Asignación de eventos. Limpiar el html de JS en línea

En javascript existen 3 formas diferenciadas de ejecutar eventos en un documento web.

Mediante un ejercicio de clase del curso IFCD0110 os animo a practicar como podemos desvincular al máximo javascript del html.

Esta lectura te puede servir para repasar la teoría necesaria para resolver el ejercicio que hoy se presenta.

Sin más dilación pasemos al ejercicio.

Enunciado

Un estudiante del curso de web está aprendiendo la teoría relativa a los eventos javascript.

Le han explicado como llamar eventos en línea con el html pero ahora está aprendiendo nuevas estrategias para la asignación de eventos.

¿Puedes ayudarle a desvincular el máximo posible el html y el javascript?

(traducción: mantén en una hoja el HTML y el CSS y crea un hoja de nombre functions.js dónde escribir todo el JS)

El código del que dispone el alumno es el que se te proporciona a continuación.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Eventos</title>
	<style>
		#contenedor{
			width:300px;
			height:300px;
			border:1px solid #000;
		}		

	</style>
</head>
<body>

	<p onclick="pintarAzul()">Haz click y se pintará azul</p>
	<p onmouseover="pintarRojo()">Saca el ratón y se pintará rojo</p>
	<p ondblclick="pintarVerde()">Haz doble click y se pintará verde</p>
	<input type="text" oninput="escribirTexto()"/>Escribe algo y se reproducirá en el contenedor
	<p onmouseenter="pintarBlanco()">Pasa el ratón por encima y se pintará blanco</p>

	<div id="contenedor"></div>


	<script>
		var zContenedor = document.getElementById("contenedor");
		var zContadorLetras = 0;	

		function pintarAzul(){
			zContenedor.style.backgroundColor = "blue";
		}
		function pintarRojo(){
			zContenedor.style.backgroundColor = "red";			
		}
		function pintarVerde(){
			zContenedor.style.backgroundColor = "green";	
		}
		function escribirTexto(){
			zContadorLetras++;
			zContenedor.innerHTML = zContadorLetras;
		}
		function pintarBlanco(){
			zContenedor.style.backgroundColor = "white";	
		}
	</script>
	
</body>
</html>

Solución del ejercicio. Estrategia 1

La primera solución posible es tratar las llamadas a eventos javascript como si se tratara de atributos.

Un atributo es cualquier información que acompaña a la etiqueta o elemento web. Por ejemplo , src, target, href, … son atributos.

Pues bien, faltaría más los eventos también lo son y se pueden llamar y modificar del mismo modo.

El código html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Eventos</title>
	<style>
		#contenedor{
			width:300px;
			height:300px;
			border:1px solid #000;
		}		

	</style>
</head>
<body>

	<p>Haz click y se pintará azul</p>
	<p>Saca el ratón y se pintará rojo</p>
	<p>Haz doble click y se pintará verde</p>
	<input type="text"/>Escribe algo y se reproducirá en el contenedor
	<p>Pasa el ratón por encima y se pintará blanco</p>
	<div id="contenedor"></div>

	<script src="functions.js"></script>
</body>
</html>

El archivo functions.js

var zContenedor = document.getElementById("contenedor");
var zContadorLetras = 0;	
var zParrafos = document.querySelectorAll("p");
var zInputs = document.querySelectorAll("input");

zParrafos[0].onclick = pintarAzul; //SIN EL PARÉNTESIS
/*fijaros en el problema. esta instrucción sobreescrible la línea 7.
se ejecuta siempre la última instrucción*/
zParrafos[0].onclick = saludo;

zParrafos[1].onmouseover = pintarRojo;
zParrafos[2].ondblclick = pintarVerde;
zParrafos[3].onmouseenter= pintarBlanco;
zInputs[0].oninput = escribirTexto;

function pintarAzul(){
	zContenedor.style.backgroundColor = "blue";
}

function saludo(){
	alert("mira ya no pinta porqué he sido el último");
}

function pintarRojo(){
	zContenedor.style.backgroundColor = "red";			
}
function pintarVerde(){
	zContenedor.style.backgroundColor = "green";	
}
function escribirTexto(){
	zContadorLetras++;
	zContenedor.innerHTML = zContadorLetras;
}
function pintarBlanco(){
	zContenedor.style.backgroundColor = "white";	
}

Solución del ejercicio. Estrategia 2

La solución previamente presentada es compatible con todos los navegadores web. Incluidas versiones anteriores a IE8.

Sin embargo el problema es que se sobrescribe posibles instrucciones anteriores. Por ejemplo no podemos ejecutar 2 eventos click distintos que hagan cosas diferentes.

Para ello la solución es usar la instrucción .addEventListener()

El código html quedará igual. Se omite.

El archivo functions.js

var zContenedor = document.getElementById("contenedor");
		var zParrafos = document.querySelectorAll("p");
		var zInputs = document.querySelectorAll("input");
		var zContadorLetras = 0;	

		zParrafos[0].addEventListener("click",pintarAzul);
		zParrafos[0].addEventListener("click",saludos);
		zParrafos[1].addEventListener("mouseover",pintarRojo);
		zParrafos[2].addEventListener("dblclick",pintarVerde);
		zParrafos[3].addEventListener("mouseenter",pintarBlanco);
		zInputs[0].addEventListener("input",escribirTexto);


		function pintarAzul(){
			zContenedor.style.backgroundColor = "blue";
		}
		function saludo(){
			window.alert("¡funcionan los dos clicks!");
		}
		function pintarRojo(){
			zContenedor.style.backgroundColor = "red";			
		}
		function pintarVerde(){
			zContenedor.style.backgroundColor = "green";	
		}
		function escribirTexto(){
			zContadorLetras++;
			zContenedor.innerHTML = zContadorLetras;
		}
		function pintarBlanco(){
			zContenedor.style.backgroundColor = "white";	
		}

Observar que ahora si podemos asignar dos funciones distintas sobre un mismo tipo de evento.

En la solución presentada fijaros que el primer párrafo cuando se pulsa desencadena dos acciones diferenciadas.

¡Hola!

Querido lector,

Deseo que este pequeño ejemplo te haya sido de utilidad.

Fijaros que no se ha usado el evento onload.

Os animo a mejorar el código.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.