 |
Evento mousemove (DOM)
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;
}