El evento mousemove se dispara cada vez que desplazamos la flecha del
mouse sobre el elemento HTML que esta escuchando este evento.
Este tipo de evento hay que utilizarlo con cuidado ya que puede
sobrecargar el navegador, ya que este evento se dispara cada vez que
desplazamos aunque sea solo un pixel.
Implementaremos para ver su funcionamiento una página que muestre un
div que capture el evento mousemove y como acción incrementaremos un
contador para saber la cantidad de veces que se disparó el evento.
<html>
<head>
<script type="text/javascript">
addEventListener('load',inicio,false);
function inicio()
{
document.getElementById('recuadro1').addEventListener('mousemove',mover,false);
}
function mover()
{
var x=parseInt(document.getElementById('cantidad').innerHTML);
x++;
document.getElementById('cantidad').innerHTML=x;
}
</script>
</head>
<body>
<div style="width:200px;height:200px;background:#0000ff" id="recuadro1">
</div>
<p id="cantidad">0</p>
</body>
</html>
Disponemos un div y un párrafo donde mostramos el número 0:
<div style="width:200px;height:200px;background:#0000ff" id="recuadro1"> </div> <p id="cantidad">0</p>
Capturamos el evento mousemove para el div:
function inicio()
{
document.getElementById('recuadro1').addEventListener('mousemove',mover,false);
}
Cada vez que se emite el evento mousemove se llama el método mover
donde extraemos el valor del párrafo, lo incrementamos en uno y lo
volvemos a actualizar:
function mover()
{
var x=parseInt(document.getElementById('cantidad').innerHTML);
x++;
document.getElementById('cantidad').innerHTML=x;
}
No hay comentarios.:
Publicar un comentario