Listado completo de tutoriales

Evento: mousemove

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.


<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <div style="width:200px;height:200px;background:#0000ff" id="recuadro1">
    </div>
    <p id="cantidad">0</p>

    <script>
        document.getElementById('recuadro1').addEventListener('mousemove', mover);

        function mover() {
            let x = parseInt(document.getElementById('cantidad').innerHTML);
            x++;
            document.getElementById('cantidad').innerHTML = x;
        }
    </script>

</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:

        document.getElementById('recuadro1').addEventListener('mousemove', mover);

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() {
            let x = parseInt(document.getElementById('cantidad').innerHTML);
            x++;
            document.getElementById('cantidad').innerHTML = x;
        }

Retornar