Información contenida en el objeto event (DOM)

La información relacionada al evento utilizando el DOM de W3C llega como parámetro a la función.

Confeccionemos una página que muestre las propiedades más importantes del objeto event:hay que recordar que esta página solo funcionará en navegadores que respetan los estándares del W3C, actualmente se acercan al 100%.

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
window.addEventListener('load',inicializarEventos,false);

function inicializarEventos()
{
  var ob=document.getElementById('recuadro');
  ob.addEventListener('click',presionMouse,false);
}

function presionMouse(e)
{
  var ob=e.target;
  while (ob.hasChildNodes())
  {
    ob.removeChild(ob.lastChild);
  }
  var nt=document.createTextNode('Tecla alt presionada (e.altKey) ? '+e.altKey);
  ob.appendChild(nt);
  insertarBR(ob);
  var nt=document.createTextNode('Tecla ctrl presionada (e.ctrlKey) ? '+e.ctrlKey);
  ob.appendChild(nt);
  insertarBR(ob);
  var nt=document.createTextNode('Tecla shift presionada (e.shiftKey) ? '+e.shiftKey);
  ob.appendChild(nt);
  insertarBR(ob);
  var nt=document.createTextNode('Nombre del evento (e.type) ? '+ e.type);
  ob.appendChild(nt);
  insertarBR(ob);
  var nt=document.createTextNode('El elemento que causo el evento (e.target) ? '+e.target);
  ob.appendChild(nt);
  insertarBR(ob);
  var nt=document.createTextNode('La coordenada x del mouse respecto a la ventana (e.clientX) ? '+ e.clientX);
  ob.appendChild(nt);
  insertarBR(ob);
  var nt=document.createTextNode('La coordenada y del mouse respecto a la ventana (e.clientY) ? '+  e.clientY);
  ob.appendChild(nt);
  insertarBR(ob);
  var nt=document.createTextNode('La coordenada x del mouse respecto a la pantalla completa (e.screenX) ? '+ e.screenX);
  ob.appendChild(nt);
  insertarBR(ob);
  var nt=document.createTextNode('La coordenada y del mouse respecto a la pantalla completa (e.screenY) ? '+ e.screenY);
  ob.appendChild(nt);
  insertarBR(ob);
  var nt=document.createTextNode('La coordenada x del mouse respecto al comienzo de la página (e.pageX) ? '+ e.pageX);
  ob.appendChild(nt);
  insertarBR(ob);
  var nt=document.createTextNode('La coordenada y del mouse respecto al comienzo de la página (e.pageY) ? '+ e.pageY);
  ob.appendChild(nt);
  insertarBR(ob);
}

function insertarBR(ob)
{
  var elemento=document.createElement('br');
  ob.appendChild(elemento);
}
</script>
<Style>
#recuadro {
  font-family:Courier;
  font-size:12px;
  background-color:#ffffcc;
  border-width:1px;
  border-style:dotted;
  border-color:#ffaa00;
  padding:20px;
}
</Style>
</head>
<body>
<h1>Navegadores que cumplen el estandar de W3C.</h1>
<pre id="recuadro">
Presione con el mouse el recuadro.
</pre>
</body>
</html>

Ver ejemplo anterior

El código javascript es:

window.addEventListener('load',inicializarEventos,false);

function inicializarEventos()
{
  var ob=document.getElementById('recuadro');
  ob.addEventListener('click',presionMouse,false);
}

function presionMouse(e)
{
  var ob=e.target;
  while (ob.hasChildNodes())
  {
    ob.removeChild(ob.lastChild);
  }
  var nt=document.createTextNode('Tecla alt presionada (e.altKey) ? '+e.altKey);
  ob.appendChild(nt);
  insertarBR(ob);
  var nt=document.createTextNode('Tecla ctrl presionada (e.ctrlKey) ? '+e.ctrlKey);
  ob.appendChild(nt);
  insertarBR(ob);
  var nt=document.createTextNode('Tecla shift presionada (e.shiftKey) ? '+e.shiftKey);
  ob.appendChild(nt);
  insertarBR(ob);
  var nt=document.createTextNode('Nombre del evento (e.type) ? '+ e.type);
  ob.appendChild(nt);
  insertarBR(ob);
  var nt=document.createTextNode('El elemento que causo el evento (e.target) ? '+e.target);
  ob.appendChild(nt);
  insertarBR(ob);
  var nt=document.createTextNode('La coordenada x del mouse respecto a la ventana (e.clientX) ? '+ e.clientX);
  ob.appendChild(nt);
  insertarBR(ob);
  var nt=document.createTextNode('La coordenada y del mouse respecto a la ventana (e.clientY) ? '+  e.clientY);
  ob.appendChild(nt);
  insertarBR(ob);
  var nt=document.createTextNode('La coordenada x del mouse respecto a la pantalla completa (e.screenX) ? '+ e.screenX);
  ob.appendChild(nt);
  insertarBR(ob);
  var nt=document.createTextNode('La coordenada y del mouse respecto a la pantalla completa (e.screenY) ? '+ e.screenY);
  ob.appendChild(nt);
  insertarBR(ob);
  var nt=document.createTextNode('La coordenada x del mouse respecto al comienzo de la página (e.pageX) ? '+ e.pageX);
  ob.appendChild(nt);
  insertarBR(ob);
  var nt=document.createTextNode('La coordenada y del mouse respecto al comienzo de la página (e.pageY) ? '+ e.pageY);
  ob.appendChild(nt);
  insertarBR(ob);
}

function insertarBR(ob)
{
  var elemento=document.createElement('br');
  ob.appendChild(elemento);
}

(adsbygoogle = window.adsbygoogle || []).push({});

Información contenida en el objeto event (DOM)