スライドショー

【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

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

Kotono

Kotono

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