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

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

LINEで送る
Pocket

SEからWebエンジニアへ転職した理由

侍エンジニア塾卒業生の小池さんは、以前は社内SEとして約5年ほど勤務していました。しかし業務内容は社内のヘルプデスク対応など、プログラムを書く仕事は全くなかったそうです。

SEながらプログラムを書けない現状に「将来仕事がなくなるんじゃないか」と不安を感じ、プログラミング学習を決意。

弊社スクールで学習し、無事ベンチャー企業のプログラマーとして転職に成功しました。そんな小池さんの学習法や転職体験談を伺いましたので、是非ご覧ください。

「プログラミングができないSEは仕事がなくなる」不安を感じたSEが未経験から転職成功するまで
更新日 : 2019年10月7日

書いた人

Kotono

Kotono

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

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説