読者です 読者をやめる 読者になる 読者になる

Noise of Web Programming

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

ブログを移転しました。

Tecuration.com

このサイト同様、HTML/CSS/JavaScriptなどのフロントサイドWeb開発に関する最新情報やライフハックを配信しています。

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

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 :


Windows
Mac




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とか簡単に書けるじゃん。色々試してみよう。

広告を非表示にする