【JavaScript】クリックやマウスホバーなど、実行タイミングを指定する方法

こんにちは朱夏です。

今回は、JavaScriptで書いた処理の実行タイミングを指定する方法について書いていきます。

朱夏

JavaScriptの処理を指定のタイミングで実行したい。

指定出来るタイミングにはどんなものがあるのかな？

良く使われるマウスホバーやクリックなどをトリガーにした実行方法と、読み込み完了時に実行されるオンロードを、サンプルと一緒に紹介したいと思います。
因みに、トリガーとして記述するコードを「イベントハンドラ」といいます。

[もくじ]
注意事項
マウスホバー
クリック、ダブルクリック
オンロード
参考サイト紹介
あとがき

今回の解説をする上で、以下の注意点があります。

注意
１．JavaScriptのコード内では関数の宣言のみ
２．呼び出しはHTMLに書く

私はJavaScriptのコード上で関数を呼び出していて、上手く動かなかったといった経験があったので、この記事を読む上での注意として最初に書きました。

マウスホバー関連には「マウスカーソルを乗せた時」と「マウスカーソルを外した時」の2つのトリガーがあります。
この2種類を組み合わせることで、ONとOFFのタイミングを変える事が出来ます。

See the Pen
poJZpwL by 朱夏 (@syunatsu1)
on CodePen.

今回は基本形として、マウスオーバーでclassを付与、マウスアウトでclassの削除を設定してみました。

今回のサンプルだと、「CSSだけでもできることを、JavaScriptを使ってやる意味があるの？」と思うかもしれません。

JavaScriptを使って実装するメリットは、「自由度が高いこと」です。
何故なら、マウスカーソルを乗せた時だけ、マウスカーソルを外した時だけ、といった具合に独立して処理を実施出来るからです。

これを利用した例としては、一度マウスカーソルを乗せたら色を付けて、その後は戻さない事も可能ですし、条件分岐などと組み合わせると、マウスカーソルを乗せる度に違う色に変化させるといった事も可能になります。

要素をクリック、またはダブルクリックした時に処理を実行するトリガーです。
サンプルの1行目と2行目でそれぞれ実装してみました。

See the Pen
jOPpYxz by 朱夏 (@syunatsu1)
on CodePen.

※実行結果の動作確認をもう一度試したい場合は、埋め込まれているcodepen右下の「Rerun」ボタンを押してね。

ページの読み込み完了をトリガーに処理が実行される方法です。

See the Pen
dyojdGO by 朱夏 (@syunatsu1)
on CodePen.

サンプルでは解り難いですが、読み込みが「完了」してから処理が開始します。
なので、ページを読み込むまでローディング画面を表示させておく時や、読み込み完了時にメッセージを表示させたい場合によく使われます。

注意するポイントとしては、オンロードは<body>か<frameset>という特定のタグでのみ機能する事です。
<div>タグなどに設定しても動作しませんので注意してください。

今回参考にさせていただいたサイトを紹介します。

イベントハンドラの一覧表と、サンプルも載っていてとても参考になりました。

今回紹介したもの以外にも、色々なイベントハンドラがあるので、興味がある方はこのサイトから調べてみてください。

というわけで、JavaScriptの実行タイミングを指定する方法を書いてみました。

今回のまとめはこちら。

今回の内容をマスターすれば、webページをかなり自由に動かせるようになるはずです。

今回はここまでです。
次回もよろしくお願いします。