JavaScriptのイベントハンドラをまとめてみた

動的なJavaScriptの実行を可能とするイベントハンドラについて学んだことをまとめておく。

通常JavaScriptはWEBサイト（HTMLファイル）の読み込み時に実行されるが、ボタンをクリックする、テキストフォームを選択するなどイベントが発生したときにJavaScriptの実行を実現するのがイベントハンドラだ。実用的な使い方としては、入力画面を選択したらフチの色が変わる、フォーム画面でsubmitボタンを押した後、未入力や文字チェックをするなど。
イベントハンドラはHTMLのタグ内の以下の^^^部分に記述する。ダブルクォーテーションで囲まれた部分はJavaScriptとして扱われる。そこで処理を完結させてもいいし、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"というポップアップウィンドウが表示される。このイベントを制御するハンドラは結構たくさんあり、その中でもこれは使えそうというものについて使い方を書いておく。可能な限りサンプルコードのDemoをのせるようにした。

イベントハンドラ解説

onBlur / onFocus

フォーム要素などにフォーカスが当たるとonFocusが、フォーカスが外れるとonBlurが実行される。

<input type="text" 
  onBlur="this.style.border = '1px solid #ccc'" 
  onFocus="this.style.border = '2px solid red'">

Demo :

onChange

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

<input type="text" onChange="this.style.color = 'red'">

Demo :

onSubmit / onReset

フォームを送信するとonSubmitが、リセットするとonResetが実行される。

<form action="" onSubmit="alert('Submit');" onReset="alert('Reset');">
  <input type="radio" name="os">Windows
  <input type="radio" name="os">Mac<br>
  <input type="submit">
  <input type="reset">
</form>

Demo :

onLoad

WEBページの読み込みが完了すると実行される。これは何も知らずブログを訪れた人がびっくりするので、Demoはなし。

<body onLoad="alert('Hi');">

onClick / onDblClick

onClickは要素をクリックすると、onDblClickはダブルクリックするとJSが実行される。

<input type="button" value="Click" onClick="alert('Click');">
<input type="button" value="DblClick" onDblClick="alert('DblClick');">

Demo :

onKeyUp / onKeyDown

キーを押すとonKeyDownが、押したキーをあげるとonKeyUpが実行される。

<input type="text" value="" onKeyUp="alert('KeyUp');">
<input type="text" value="" onKeyDown="alert('KeyDown');">

Demo :
onKeyUp :
onKeyDown :

onMouseOut / onMouseOver

要素へマウスが乗るとonMouseOverが、要素から外れるとonMouseOverが実行される。

<span onMouseOut="this.style.color='red'">MouseOut</span>
<span onMouseOver="this.style.color='red'">MouseOver</span>

Demo :
MouseOut
MouseOver

onMouseUp / onMouseDown

要素をクリックするとonMouseDownが、押したクリックをあげるとonMouseUpが事項される。

<span onMouseUp="this.style.color='red'">MouseUp</span>
<span onMouseDown="this.style.color='red'">MouseDown</span>

Demo :
MouseUp
MouseDown

かなり色々なイベントが制御できるので組み合わせるとかなり面白い。イベントハンドラを使う人は参考にどうぞ。

編集後記：
はてなブログってJS実行できるんだなーと感動。Demoとか簡単に書けるじゃん。色々試してみよう。

Noise of Web Programming

主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。

JavaScriptのイベントハンドラをまとめてみた