JavaScript

JavaScript's onmousemove event detects when a user moves the mouse, allowing you to execute code in response to that movement.

onmousemove [event]

　onmousemove（または mousemoveイベント）は、ユーザーがマウスを動かしたときに発生するイベントです。特定の要素上でマウスが動いたときに、その動きに応じて処理を実行することができます。

基本的な使い方

JavaScript

element.addEventListener('mousemove', function(event) {
	// マウスの位置情報を取得して処理するコード
	const x = event.clientX;
	const y = event.clientY;
	console.log(`マウス座標: (${x}, ${y})`);
});

　このコードでは、element上でマウスが動くたびに、マウスの座標がコンソールに表示されます。

用途

注意点

　mousemoveイベントは非常に高頻度で発生するため、重い処理を行うとパフォーマンスに影響を与える可能性があります。必要に応じて、requestAnimationFrameやデバウンス処理を用いて負荷を軽減することが推奨されます。

onmousemoveとmousemoveの違い

　onmousemoveと mousemoveの違いは、onmousemoveがイベントハンドラプロパティであるのに対し、mousemoveはイベントの種類を表す名前である点です。

具体的には

onmousemove（イベントハンドラプロパティ）
DOM要素のプロパティとして存在し、マウスが動いたときに実行したい関数を直接割り当てます。

JavaScript

element.onmousemove = function(event) {
	// マウスが動いたときの処理
};
mousemove（イベント名）
addEventListenerメソッドと組み合わせて使用し、イベントリスナーを登録します。

JavaScript

element.addEventListener('mousemove', function(event) {
	// マウスが動いたときの処理
});

まとめると

onmousemove
イベントハンドラプロパティで、特定の要素に対して直接関数を割り当てます。
mousemove
イベント名で、addEventListenerを使ってリスナーを登録する際に使用します。

　なお、JavaScriptは大文字と小文字を区別するため、onMouseMoveや mouseMoveという名称は一般的ではありません。標準的にはすべて小文字の onmousemoveと mousemoveが使用されます。

Sample

 

HTML

<body id="omm">
	<div id="smp"></div>
</body>

JavaScript

document.getElementById('omm').addEventListener('mousemove', function(event) {
	// マウスの位置情報を取得して処理するコード
	const x = event.clientX;
	const y = event.clientY;
	document.getElementById('smp').textContent = `マウス座標: (${x}, ${y})`;
});