js--mousemove イベント

mousemove イベント

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【mousemoveイベントの使い方】
mousemove イベントはマウスのカーソルが要素の上にある状態で、マウスが動いた時に発生するイベントです。

イベントの種類 : MouseEvent
バブリングの可否 : 可能
キャンセルの可否 : 可能

【要素の属性値にイベントハンドラを登録する場合】
＜canvas id="mycanvas" onmousemove="mouseMove()"＞
＜script＞
　function mouseMove(){
　console.log('MouseMove');
　}
＜/script＞

【ノードの要素.プロパティにイベントハンドラを入れる場合】
DOM を使って取得した要素のプロパティにイベントハンドラを登録する場合は onmousemove プロパティを使用します。
＜canvas id="mycanvas"＞
＜script＞
　function mouseMove(){
　　console.log('MouseMove');
　}
　//指定したノードの取得
　let mycanvas = document.getElementById('mycanvas');
　mycanvas.onmousemove = mouseMove;
＜/script＞
イベントハンドラ（mouseMove）には、コールバック関数・無名関数・アロー関数式が使える

【イベントリスナーを登録する場合】
＜canvas id="mycanvas"＞
＜script＞
　function mouseMove(){
　　console.log('MouseMove');
　}
　//指定したノードの取得
　let mycanvas = document.getElementById('mycanvas');
　mycanvas.addEventListener('mousemove', mouseMove);
＜/script＞
 addEventListener メソッドを使ってイベントリスナーを登録した場合、イベントが発生した時、イベントリスナーを呼び出す。
※イベントリスナーはイベントハンドラーと同じ、addEventListener メソッドを使う時、呼び方が違う

【Event を使った時】
イベントが発生してイベントハンドラやイベントリスナーが呼び出されるとき、引数として発生したイベントに関する情報が含まれる Event オブジェクトが渡されてきます。 mousemove イベントの場合は Event オブジェクトを継承した MouseEvent オブジェクトが渡されてきます。

＜canvas id="mycanvas"＞
＜script＞
　function mouseMove(event){
　　console.log(event);
　}
　//指定したノードの取得
　let mycanvas = document.getElementById('mycanvas');
　mycanvas.onmousemove = mouseMove;
＜/script＞

サンプル

「マウス.css」
#mycanvas{

    border:1px solid #000000;

    }

「ムーブ.js」

function mouseMove(event){

    context.beginPath();

    context.arc(event.offsetX, event.offsetY, 10, 0, 2 * Math.PI);

    context.stroke();

}

let mycanvas = document.getElementById('mycanvas');

let context = mycanvas.getContext('2d');

mycanvas.addEventListener('mousemove', mouseMove);

ブラウザを立ち上げる