今回は動的なJavaScriptの実行を可能とするイベントハンドラについて整理しておきたいと思います。久しぶりにJavaScriptを扱う時に意外と忘れてしまいがちなので、復習を兼ねてまとめていきます。
そもそも、イベントハンドラとは
通常JavaScriptはHTMLファイルの読み込み時に実行されますが、「ボタンをクリックする」、「テキストフォームを選択する」などのイベントが発生したときにJavaScriptを実行させることができるのがイベントハンドラです。よく使われるイベントハンドラの使い方は、入力画面を選択したらフチの色が変わる、会員登録画面で確認ボタンを押したときに、必須項目の未入力や文字の入力チェックをするなどがあります。
イベントハンドラはHTMLのタグ内に直接記述してそこで処理を完結させてもいいし、functionを呼び出してそちらで処理することもできます。
// 1. HTML内で処理を完結させる場合
<input type="button" value="push" onclick="alert('Hi');">
// 2. functionを呼び出して処理する場合
<input type="button" value="push" onclick="alertFunc();">
<script>
function alertFunc(){ alert('Hi'); };
</script>
上記の1も2も処理される内容は同じです。「ボタンをクリックする」というイベントが発生すると、”Hi”というポップアップウィンドウが表示されます。
このようにイベントを制御するハンドラはたくさんあり、その中でもこれはよく使うなというものについてご紹介します。
フォーム要素にフォーカスが当たるとき／外れたときに処理を行う onFocus / onBlur
フォーム要素などにフォーカスが当たるときに処理を実行したい時はonFocusを、フォーカスが外れるときに処理を実行したい時はonBlurを使って処理を行います。これは、会員登録のフォームでテキストボックスなどに使われることが多いです。
入力例をボックス内に表示させておき、フォーカスがあたると非表示にするときなどに使われます。
<input type="text" width="80%" onFocus="cText(this)" onBlur="sText(this)" value="フォーカスをあててください。" />
<script type="text/javascript">
function cText(obj){
if(obj.value==obj.defaultValue){
obj.value="";
obj.style.color="#000";
}
}
function sText(obj){
if(obj.value==""){
obj.value=obj.defaultValue;
obj.style.color="#999";
}
}
</script>
入力内容や選択内容が変わった時に処理を行う onChange
フォーム要素などの入力内容や選択内容が変更されると実行されます。
<input type="text" value="何か入力してください" onChange="alert('入力内容が変更されました')" />
フォームの送信時やリセット時に処理を行う onSubmit / onReset
フォームを送信するときに処理を実行したい時はonSubmit、リセットすると実行したい時はonResetを使って処理を行います。
<form action="" onSubmit="alertSubmit();" onReset="alert('選択をリセットします。');">
<label><input type="radio" name="os">Windows</label>
<label><input type="radio" name="os">Mac</label>
<input type="submit">
<input type="reset">
</form>
function alertSubmit(){
var os = $("input[name='os']:checked").parent().text();
alert('選択されたOSは'+os+'です。');
}
ページ読み込み時に処理を実行する onLoad
WEBページの読み込みが完了すると処理が実行されるonLoad。
これは、デモをしてしまうと何も知らずにサイトに訪れてくれた方が驚くので今回はデモなしにしておきます。
<body onLoad="alert('Hi');">
クリック／ダブルクリック時に処理を実行する onClick / onDblClick
クリックされた時に処理を実行したいときはonClickを、ダブルクリックされた時に処理を実行したい時はonDblClickを使用して処理を行います。
<input type="button" value="クリックしてください" onClick="alert('クリックされました');">
<input type="button" value="ダブルクリックしてください" onDblClick="alert('ダブルクリックされました');">
キーを押したとき／あげたときに処理を行う onKeyDown / onKeyUp
キーを押すとonKeyDownが、押したキーをあげるとonKeyUpが実行されます。KeyUpは入力された文字数をカウントしたり、名前を入力した時にカナを自動でふったりする時によくつかわれます。
下のテキストボックスに何か入力してみてください。
<input type="text" value="" onKeyUp="keyUpEvent(value);" /> <div id="keyupbox">0文字</div>
function keyUpEvent(str){
document.getElementById("keyupbox").innerHTML = str.length + "文字";
}
要素にマウスが乗ったとき／離れたときに処理を行う onMouseOver / onMouseOut
要素にマウスが乗ったときに処理を行いたい場合はonMouseOver、マウスが要素から外れるときに処理を行いたい場合はonMouseOverで処理を実行します。
メニューバーの背景色を変えたりする場合によくつかわれます。
| メニュー1 | メニュー2 | メニュー3 | メニュー4 |
<table>
<tr>
<td onMouseOver="style='background-color:#A9A9A9;'" onMouseOut="style='background-color:#D3D3D3;'" style="background-color:#D3D3D3;">メニュー1</td>
<td onMouseOver="style='background-color:#A9A9A9;'" onMouseOut="style='background-color:#D3D3D3;'" style="background-color:#D3D3D3;">メニュー2</td>
<td onMouseOver="style='background-color:#A9A9A9;'" onMouseOut="style='background-color:#D3D3D3;'" style="background-color:#D3D3D3;">メニュー3</td>
<td onMouseOver="style='background-color:#A9A9A9;'" onMouseOut="style='background-color:#D3D3D3;'" style="background-color:#D3D3D3;">メニュー4</td>
</tr>
</table>
イベントハンドラのまとめ
イベントハンドラでは、いろいろなイベントが制御できるので、組み合わせて使うことでちょっと難しい処理もできるようになったりと、できる処理の幅が広がるので、使ってみてください。イベントハンドラを使うときに参考にしてみてください。
コメント