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

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

JavaScriptカリキュラム無料公開中!


この記事はJavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】の一部になります。このカリキュラムは、プログラミング入門者が、JavaScriptの基礎学習からアプリ開発、さらには仕事獲得まで体系的に学べる内容となっています。

JavaScript学習に必要な情報を一つにまとめていますので効率よくJavaScriptを学ぶことが出来ます。この機会に是非活用していただければと思います。

JavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】
更新日 : 2018年12月13日

無料体験レッスン実施中

今あなたはこんな悩みをお持ちではないでしょうか?

「つまづいてばかりで学習が進まない…」
「どこまで勉強すればいいのか、終わりが見えない…」
「習得できたとしてもどうやって仕事につなげればいいのかわからない…」

プログラミング学習やキャリアに関してお困りであれば、まずは『無料体験レッスン』にお申し込み下さい。

あなたにとって、最適の解決策をご提案させていただきます。

詳しくは下の画像をから詳しいサービス内容をご確認ください。

cta_js2

LINEで送る
Pocket

書いた人

Kotono

Kotono

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

おすすめコンテンツ

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

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