御隠居のJavaScript入門
８. イベント処理
これまでのサンプルでは、JavaScriptのプログラムを動かすきっかけとして、input要素を使用しました。 この要素を記述するときのポイントは、onclick属性を記述し、その属性値としてjavaScriptプログラムを記述する点でした。
<input type="button" value="val1の表示" onclick="alert(val1);" />このときボタンをクリックしてからプログラムが動作したわけですが、 このきっかけとなる「クリック」をイベントと呼びます。 このイベントの発生を知るためにはイベント属性を記述する必要があります。 つまり、イベント属性を記述しないボタンでは、クリックしても何も起こりません。
イベントが発生すると、イベント属性の属性値に記述してるプログラムを呼び出します。 このプログラムのことをイベントハンドラと呼びます。 すなわち、イベント属性によって要素に指定されたイベントとイベントハンドラが関連付けられることになります。
どの要素にどのイベント属性が記述可能かは、(X)HTMLのDTDを調べることになります。 ただし、指定可能であってもブラウザ側が対応していない場合には機能しません。 また、input要素などtype属性によって部品が異なる要素の場合には、それぞれで指定できるイベント属性が異なってきます。
多くの要素で指定できるイベント属性として以下のものがあります。
- onclick
- 指定された要素がクリックされたとき。
- ondblclick
- 指定された要素がダブルクリックされたとき。
- onmousedown
- 指定された要素上でポインティングデバイスのボタンが押されたとき。
- onmouseup
- 指定された要素上でポインティングデバイスのボタンが離されたとき。
- onmousemove
- 指定された要素上でポインティングデバイスを移動したとき
- onmouseout
- 指定された要素上からポインティングデバイスが離れたとき
- onkeypress
- キーボードが押された後、離されたとき
- onkeydown
- キーボードを押したとき
- onkeyup
- キーボードを離したとき
これらのイベント属性が指定できない（DTDの制約上）要素は、br要素とparam要素のみです （ただし、指定はできても機能するかどうかは別問題です） 。
上記のイベント属性以外にも、以下のようなイベント属性があります。
- onload
- 文書が読み込まれたとき。body要素に指定できます。
- onunload
- 他の文書に移動したとき。body要素に指定できます。
- onfocus
- 指定された要素がフォーカスされたとき。 a要素、area要素、label要素、input要素、select要素、textarea要素、button要素に指定できます。
- onblur
- 指定された要素からフォーカスが離れたとき。 a要素、area要素、label要素、input要素、select要素、textarea要素、button要素に指定できます。
- onchange
- 指定された要素の内容が変更され、フォーカスが離れたとき。 input要素、select要素、textarea要素に指定できます。
- onselect
- 指定された要素の内容が選択されたとき。 input要素、textarea要素に指定できます。
- onsubmit
- フォームの送信ボタンが押されたとき。form要素に指定できます。
- onreset
- フォームのリセットボタンが押されたとき。form要素に指定できます。