40 - 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.

pagina.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
</head>

<body>
    <p id="corx">coordenada x=</p>
    <p id="cory">coordenada y=</p>
    <script src="funciones.js"></script>
</body>

</html>

funciones.js

let ref = document.getElementsByTagName('html')
ref[0].addEventListener('mousemove', (e) => {
    document.getElementById('corx').innerText = 'coordenada x=' + e.clientX
    document.getElementById('cory').innerText = 'coordenada y=' + e.clientY
})

Obtenemos inicialmente la referencia al nodo html del documento:

let ref = document.getElementsByTagName('html')

Como existe una sola marca html 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:

ref[0].addEventListener('mousemove', (e) => {
    document.getElementById('corx').innerText = 'coordenada x=' + e.clientX
    document.getElementById('cory').innerText = 'coordenada y=' + e.clientY
})

Retornar