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

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

この記事では

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

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

・onmouseover属性の使い方

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

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

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

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

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

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

onmouseoverとは

では、マウスオーバーイベントが何か理解したところで、onmouseoverについて説明させてください。

マウスオーバーイベントは「イベント」であり、onmouseoverはイベントハンドラです。

イベントハンドラとは、イベントの発生時に行う処理を指定する為に必要なものです。

なので、onmouseoverは、マウスのカーソルがある特定の要素の上に乗った時に行う処理を担うイベントハンドラなのです。

onmouseleaveとは

onmouseoverの他にも、onmouseleaveというものが存在します。

その名の通り、マウスのカーソルがある特定の要素の上から離れた時に発動するイベントを処理するものです。

次のセクションでご紹介するサンプルコードでは、この二つを使っていきます。

マウスオーバーイベントを使ってみよう

では実際に、マウスオーバーイベントを発動させ、処理してみましょう。

以下のサンプルコードをご覧ください。

上のコードでは、まずはシンプルな正方形をdivタグを用いて作成しました。

正方形の背景色は、薄いピンクに指定してあります。

そして、HTMLのイベント属性を使用し、イベントハンドラを登録しました。

ご覧いただけるように、divタグのコードにonmouseover属性と、onmouseleave属性が追加されています。

onmouseover属性には、マウスのカーソルが正方形の上にある時発動させるover関数を指定しました。

over関数の引数にthisとあるのは、div要素自身がover関数の引数である事を指しています。

over関数は、div要素のstyle.backgroundColorプロパティにアクセスし、正方形の背景色を青に設定します。

onmouseleave属性には、leave関数を指定しました。

leave関数も、over関数と同じようにdiv要素のstyle.backgroundColorプロパティにアクセスし、正方形の背景色を赤に設定します。

こうすることで、元はピンクだった正方形が、カーソルを正方形に乗せると青色に、カーソルを正方形から話すと赤色になるようにしました。

まとめ

今回は、マウスオーバーイベントについて解説しました。

JavaScriptにはマウスオーバーイベントの他にもたくさんのイベントが存在します。

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

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

Kotono

Kotono

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

おすすめコンテンツ

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

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