Exercici 6 Events

De wikiserver
La revisió el 16:23, 14 nov 2017 per Jnoguera (Discussió | contribucions)
(dif) ← Versió més antiga | Versió actual (dif) | Versió més nova → (dif)
Dreceres ràpides: navegació, cerca

Solució Javascript:

function handler(evento){
	var e  = evento || window.event;
	var div_html = document.getElementById("dades");
	var html = "";
	switch(evento.type){
		case "mousemove":
			div_html.style.backgroundColor = "#FFF";
			var posRelX = e.clientX || e.pageX;
			var posRelY = e.clientY || e.pageY;
			html = "<h1>RATON</h1><p>Navegador[" + posRelX + "," + posRelY + "]";

			var posAbsX = posRelX + (document.documentElement.scrollLeft || 	document.body.scrollLeft);
			var posAbsY = posRelY + (document.documentElement.scrollTop || 	document.body.scrollTop);

			html = html + "</p><p>Pagina[" + posAbsX + "," + posAbsY + "]</p>";
			break;
		case "keypress":
			div_html.style.backgroundColor = "#CCE6FF";
			var codigo = (evento.keyCode||evento.which);
			var c = String.fromCharCode(codigo);
			html =  "<h1>TECLADO</h1><p>Caracter[" + c + "]";
			html = html + "</p><p>Codigo[" + codigo + "]</p>";
			break;
		case "click": 
			div_html.style.backgroundColor = "#FFFFCC";
			html = div_html.innerHTML;
	}
	div_html.innerHTML = html;
}

window.onmousemove = handler;
window.onkeypress = handler;
window.onclick = handler;
</pre>

Fitxer Html:
<pre>
<HTML>
<HEAD>
	<TITLE>
		EXERCICI 6
	</TITLE>
	<script src="exercici1.js"></script>

</HEAD>

<body>

	<div id="dades"></div>

</body>
</HTML>