onfocusとonblurは殆どセットで使われることが多いです。このイベントハンドラはオブジェクトにフォーカスされた時（onfocus）とフォーカスが外れた時（onblur)というタイミングで実行されます。実行されるオブジェクトはinput内のtypeがselect、textの場合とtextareaのみで操作が可能です。link（<a></a>)にフォーカスをすることなどはできません。
フォーカスというのはそのオブジェクトにカーソルが当てられて入力待ちという状態の時を指します。
ハンドラ自体が作用するオブジェクトが決まっているというのは覚えるのが面倒ですね。以下のような感じになります。
どのオブジェクトに有効か？というのと、そのオブジェクトの指定を間違わなければ簡単に機能します。
フォーカスというのはそのオブジェクトにカーソルが当てられて入力待ちという状態の時を指します。
上記の例では収入と支出に値が入力され、残高にカーソルが当てられた状態になると結果を表示します。そして、残高のフィールドからカーソルが外れると「もう一度計算できます。」というメッセージが表示されます。<form name="result">
<p>収入 <input type="text" value="0" class="right" name="income">円</p>
<p>支出 <input type="text" value="0" class="right" name="outgo">円</p>
<p>残高 <input type="text" value="0" class="right" name="rest" onfocus="document.result.rest.value=document.result.income.value-document.result.outgo.value" onblur="document.result.rest.value='もう一度計算できます。'">円</p>
</form>
ハンドラ自体が作用するオブジェクトが決まっているというのは覚えるのが面倒ですね。以下のような感じになります。
解説
各オブジェクトにはname=""でもってそれぞれ名前を割り振ります。そうじゃないとどのオブジェクトに対して何を行うのかわからなくなるからです。<input type="text" ...>にはvalueを指定することができるので結果表示の残高のフィールド部分ではそのvalueの値を操作しています。- document.result.rest.value（残高のフィールド）の値は、
- document.result.income.value（収入）から
- document.result.outgo.value（支出）を引いた値ということになります。
どのオブジェクトに有効か？というのと、そのオブジェクトの指定を間違わなければ簡単に機能します。
