2018/09/30JavaScriptのマウスイベントで処理を行うサンプルです。Chrome目次mouseoverイベントとmouseoutイベント画像を切り替えるサンプルmousemoveイベントmousedownイベントとmouseupイベントmouseoverイベントとmouseoutイベントmouseoverイベントとmouseoutイベントで処理を行うサンプルです。「テスト1」にカーソルを置くとmouseoverイベントが発生します。イベントを利用して背景色を表示します。カーソルを外すとmouseoutイベントが発生します。イベントを利用して色を消します。テスト1コード上記サンプルのコードです。"transparent";}</script>5行目のonmouseoverとonmouseoutはイベントハンドラです。イベントハンドラトはイベントを受けて処理に繋げます。マウスが上にのるとonmouseoverの=の右にある関数(=8行目)が実行されます。マウスが外れるとonmouseoutの=の右にある関数(=11行目)が実行されます。画像を切り替えるサンプル画像を切り替えるサンプルです。画像にカーソルを置くとmouseoverイベントが発生し画像を切替えます。カーソルを外すとmouseoutイベントが発生し元の画像を表示します。コード上記サンプルのコードです。/>imgタグの中にonmouseoverとonmouseoutを記述します。画像ファイル名の前にthis.srcを追加し、画像ファイル名はシングルコーテーションで括ります。mousemoveイベントmousemoveイベントで処理を行うサンプルです。四角の場所でカーソルを動かすとmousemoveイベントが発生します。イベントを利用してカーソルの座標を更新します。四角からカーソルが出るとイベントは発生しないので座標は更新されません。コード上記サンプルのコードです。e.clientY;}</script>6行目のonmousemoveはイベントハンドラです。イベントハンドラトはイベントを受けて処理に繋げます。マウスが移動するとonmousemoveの=の右にある関数(=9行目)が実行されます。mouseMove1(event)のeventはeventオブジェクトです。mousedownイベントとmouseupイベントmousedownイベントとmouseupイベントで処理を行うサンプルです。downという文字をクリックするとクリックのダウンの部分でmousedownイベントが発生します。イベントを利用してテスト3の箇所に背景色をつけます。upという文字をクリックするとクリックのアップの部分でmouseupイベントが発生します。イベントを利用してテスト3の箇所の背景色を消します。テスト3downupコード上記サンプルのコードです。"transparent";}</script>6,7行目のonmousedownとonmouseupはイベントハンドラです。イベントハンドラトはイベントを受けて処理に繋げます。6行目の文字をクリックするとonmousedownの=の右にある関数(=10行目)が実行されます。マウスダウンなのでそのままでは色が残ります。7行目の文字をクリックするとonmouseupの=の右にある関数(=13行目)が実行されます。