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.[vc_custom_heading text=»El código html» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]
<!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>[vc_custom_heading text=»El archivo functions.js» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]
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.[vc_custom_heading text=»El archivo functions.js» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]
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!
Deja una respuesta