今回はJavaScriptにおけるマウスオーバーイベントについて解説していきたいと思います。
この記事では
・マウスオーバーイベントとは
・onmouseover属性とは
・onmouseleave属性とは
などといった基本的な内容から
・onmouseover属性の使い方
といったより具体的な内容に関しても、分かりやすく説明していきたいと思います。
マウスオーバーイベントとは
みなさんは「マウスオーバーイベント」が何かわかりますか？
マウスオーバーイベントとは、その名の通りマウスのカーソルが要素の上に重なった時に発動するイベントのことです。
イベントやイベントハンドラに関する詳しい説明は、以下のリンクを参照してください。
onmouseoverとは
では、マウスオーバーイベントが何か理解したところで、onmouseoverについて説明させてください。
マウスオーバーイベントは「イベント」であり、onmouseoverはイベントハンドラです。
イベントハンドラとは、イベントの発生時に行う処理を指定する為に必要なものです。
なので、onmouseoverは、マウスのカーソルがある特定の要素の上に乗った時に行う処理を担うイベントハンドラなのです。
onmouseleaveとは
onmouseoverの他にも、onmouseleaveというものが存在します。
その名の通り、マウスのカーソルがある特定の要素の上から離れた時に発動するイベントを処理するものです。
次のセクションでご紹介するサンプルコードでは、この二つを使っていきます。
マウスオーバーイベントを使ってみよう
では実際に、マウスオーバーイベントを発動させ、処理してみましょう。
以下のサンプルコードをご覧ください。
<html>
<body>
<div id="div1" style="width: 150px; height: 150px; padding: 10px; background-color:pink; border: 1px solid #000000" onmouseover="over(this)" onmouseleave="leave(this)"></div>
</body>
<script>
function over(x) {
x.style.backgroundColor = "blue";
}
function leave(x) {
x.style.backgroundColor = "red";
}
</script>
</html>
上のコードでは、まずはシンプルな正方形をdivタグを用いて作成しました。
正方形の背景色は、薄いピンクに指定してあります。
そして、HTMLのイベント属性を使用し、イベントハンドラを登録しました。
ご覧いただけるように、divタグのコードにonmouseover属性と、onmouseleave属性が追加されています。
onmouseover属性には、マウスのカーソルが正方形の上にある時発動させるover関数を指定しました。
onmouseover="over(this)"
over関数の引数にthisとあるのは、div要素自身がover関数の引数である事を指しています。
over関数は、div要素のstyle.backgroundColorプロパティにアクセスし、正方形の背景色を青に設定します。
onmouseleave属性には、leave関数を指定しました。
leave関数も、over関数と同じようにdiv要素のstyle.backgroundColorプロパティにアクセスし、正方形の背景色を赤に設定します。
こうすることで、元はピンクだった正方形が、カーソルを正方形に乗せると青色に、カーソルを正方形から話すと赤色になるようにしました。
まとめ
今回は、マウスオーバーイベントについて解説しました。
JavaScriptにはマウスオーバーイベントの他にもたくさんのイベントが存在します。
みなさんもこの記事を通して、イベント処理に関する知識をどんどん増やしていってくださいね！
