【JavaScript入門】即実践できる!マウスオーバーイベントを使ってみよう

今回はJavaScriptにおけるマウスオーバーイベントについて解説していきたいと思います。

この記事では

・マウスオーバーイベントとは
・onmouseover属性とは
・onmouseleave属性とは

などといった基本的な内容から

・onmouseover属性の使い方

といったより具体的な内容に関しても、分かりやすく説明していきたいと思います。

マウスオーバーイベントとは

みなさんは「マウスオーバーイベント」が何かわかりますか?

マウスオーバーイベントとは、その名の通りマウスのカーソルが要素の上に重なった時に発動するイベントのことです。

イベントやイベントハンドラに関する詳しい説明は、以下のリンクを参照してください。

【JavaScript入門】初心者でも分かるイベント処理の作り方まとめ!
更新日 : 2019年2月28日

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にはマウスオーバーイベントの他にもたくさんのイベントが存在します。

みなさんもこの記事を通して、イベント処理に関する知識をどんどん増やしていってくださいね!

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

Kotono

イタリア在住15年目の22歳です。イタリアの大学で情報科学&応用数学を学んでいます。主にJavaScriptやPythonについての記事を書いたりしています。

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー