意外と忘れてしまいがち?JavaScriptのイベントハンドラ

   

今回は動的なJavaScriptの実行を可能とするイベントハンドラについて整理しておきたいと思います。久しぶりにJavaScriptを扱う時に意外と忘れてしまいがちなので、復習を兼ねてまとめていきます。

そもそも、イベントハンドラとは

通常JavaScriptはHTMLファイルの読み込み時に実行されますが、「ボタンをクリックする」、「テキストフォームを選択する」などのイベントが発生したときにJavaScriptを実行させることができるのがイベントハンドラです。よく使われるイベントハンドラの使い方は、入力画面を選択したらフチの色が変わる、会員登録画面で確認ボタンを押したときに、必須項目の未入力や文字の入力チェックをするなどがあります。

イベントハンドラはHTMLのタグ内に直接記述してそこで処理を完結させてもいいし、functionを呼び出してそちらで処理することもできます。

上記の1も2も処理される内容は同じです。「ボタンをクリックする」というイベントが発生すると、"Hi"というポップアップウィンドウが表示されます。

このようにイベントを制御するハンドラはたくさんあり、その中でもこれはよく使うなというものについてご紹介します。

フォーム要素にフォーカスが当たるとき/外れたときに処理を行う onFocus / onBlur

フォーム要素などにフォーカスが当たるときに処理を実行したい時はonFocusを、フォーカスが外れるときに処理を実行したい時はonBlurを使って処理を行います。これは、会員登録のフォームでテキストボックスなどに使われることが多いです。

入力例をボックス内に表示させておき、フォーカスがあたると非表示にするときなどに使われます。

入力内容や選択内容が変わった時に処理を行う onChange

フォーム要素などの入力内容や選択内容が変更されると実行されます。

フォームの送信時やリセット時に処理を行う onSubmit / onReset

フォームを送信するときに処理を実行したい時はonSubmit、リセットすると実行したい時はonResetを使って処理を行います。

    

ページ読み込み時に処理を実行する onLoad

WEBページの読み込みが完了すると処理が実行されるonLoad。
これは、デモをしてしまうと何も知らずにサイトに訪れてくれた方が驚くので今回はデモなしにしておきます。

クリック/ダブルクリック時に処理を実行する onClick / onDblClick

クリックされた時に処理を実行したいときはonClickを、ダブルクリックされた時に処理を実行したい時はonDblClickを使用して処理を行います。

 

キーを押したとき/あげたときに処理を行う onKeyDown / onKeyUp

キーを押すとonKeyDownが、押したキーをあげるとonKeyUpが実行されます。KeyUpは入力された文字数をカウントしたり、名前を入力した時にカナを自動でふったりする時によくつかわれます。

下のテキストボックスに何か入力してみてください。

 
0文字

要素にマウスが乗ったとき/離れたときに処理を行う onMouseOver / onMouseOut

要素にマウスが乗ったときに処理を行いたい場合はonMouseOver、マウスが要素から外れるときに処理を行いたい場合はonMouseOverで処理を実行します。

メニューバーの背景色を変えたりする場合によくつかわれます。

メニュー1メニュー2メニュー3メニュー4

イベントハンドラのまとめ

イベントハンドラでは、いろいろなイベントが制御できるので、組み合わせて使うことでちょっと難しい処理もできるようになったりと、できる処理の幅が広がるので、使ってみてください。イベントハンドラを使うときに参考にしてみてください。

 - jQuery・JavaScript