Evento mousemove (DOM)

El evento mousemove se dispara cuando se mueve la flecha del mouse dentro del elemento HTML respectivo.

En el siguiente ejemplo capturamos el evento mousemove a nivel de la marca html es decir que se dispara cada vez que desplazamos el mouse dentro de la página. Mostraremos la coordenada donde se encuentra la flecha del mouse.

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

function inicializarEventos(e)
{
  var ref=document.getElementsByTagName('html');
  ref[0].addEventListener('mousemove',mover,false);
}

function mover(e)
{
  var corx=document.getElementById('corx');
  var cory=document.getElementById('cory');
  corx.firstChild.nodeValue='coordenada x='+e.clientX;
  cory.firstChild.nodeValue='coordenada y='+e.clientY;
}</script>
</head>
<body>
<p id="corx">coordenada x=</p>
<p id="cory">coordenada y=</p>
</body>
</html>

El código javascript es:

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

function inicializarEventos(e)
{
  var ref=document.getElementsByTagName('html');
  ref[0].addEventListener('mousemove',mover,false);
}

function mover(e)
{
  var corx=document.getElementById('corx');
  var cory=document.getElementById('cory');
  corx.firstChild.nodeValue='coordenada x='+e.clientX;
  cory.firstChild.nodeValue='coordenada y='+e.clientY;
}

Obtenemos inicialmente la referencia al nodo html del documento:

  var ref=document.getElementsByTagName('html');
  ref[0].addEventListener('mousemove',mover,false);

Como existe una sola marca body en un documento la extraemos a través del método getElementsByTagName, como este retorna un vector con todas las marcas que coinciden con la que le enviamos como parámetro y sabemos que solo puede ser una luego accedemos a la componente cero de este vector.
La función mover rescata del parámetro que llega a la función la coordenada x e y donde se encuentra la flecha del mouse actualmente (e.clientX, e.clientY)

function mover(e)
{
  var corx=document.getElementById('corx');
  var cory=document.getElementById('cory');
  corx.firstChild.nodeValue='coordenada x='+e.clientX;
  cory.firstChild.nodeValue='coordenada y='+e.clientY;
}