【JavaScript】mousemoveイベントとは？マウスカーソルが動いた時にイベント実行

▼トリガーになる要素を取得(addEventListenerとonmousemoveプロパティで使用)
const elem = document.getElementById('js-elem'); // トリガーになる要素を取得

▼addEventListenerメソッド
elem.addEventListener('mousemove',function(){　// 第一引数にmousemoveを指定
  // 処理を記述
});

▼onmousemoveプロパティ
elem.onmousemove = function(){
  // 処理を記述
};

▼onmousemove属性
<button onmousemove="mousemoveEvent()">テキスト</button>

<script>
function mousemoveEvent(){
  // 処理を記述
};
</script>

<style>
#js-move{
  max-width:500px;
  height:250px;
  background:#e94709;
  display:flex;
  align-items:center;
  justify-content:center;
}
</style>

<div id="js-move">ここでマウスカーソルを移動させてね！</div>
<p>現在の座標</p>
<p>X:<span id="point-x"></span></p>
<p>Y:<span id="point-y"></span></p>

<script>
const moveElem = document.getElementById('js-move'); // ①
const pointX = document.getElementById('point-x');   // ②
const pointY = document.getElementById('point-y');   // ②
  
moveElem.addEventListener('mousemove',function(e){ // ③
  pointX.textContent = e.offsetX; // ④
  pointY.textContent = e.offsetY; // ④
})
</script>