JavaScript イベントハンドラ
イベントハンドラプロパティの設定
イベントハンドラを登録するには、イベントターゲットのプロパティに、イベントハンドラ関数を設定するのが最も簡単です。イベントハンドラプロパティの名前は、イベントの名前の前に「on」を追加したものになるのが普通です。
例えば、「onclick」「onchange」「onload」などです。これらのプロパティ名では、大文字と小文字が区別されます。「readystatechange」などのように、イベントタイプが複数の単語から構成されるような場合でも、すべて小文字で記述する。
------------------------------------------------------------------------------------------------------------------
//windowオブジェクトのonloadプロパティに関数を設定する。この関数がイベントハンドラになる。ドキュメントがロードされたときに呼び出しされる。
window.onload = function(){
//<form>要素を検索する。
var elt = document.getElementById("shipping_address");
//イベントハンドラ関数を登録し、フォーム送信直前に、呼び出されるようにする。
elt.onsubmit = function(){ return validate(this);}}
------------------------------------------------------------------------------------------------------------------
上記の方法は、広く使われるイベントタイプであれば、すべてのブラウザでうまく動作する。一般的には、イベントを定義するwebAPIのうち広く実装されているものであれば、イベントハンドラプロパティを設定することでイベントハンドラを登録できるようになっています。
addEventListener
すべてのブラウザでサポートされている標準のイベントモデルでは、addEventListener()というメソッドを定義しているオブジェクトであれば、イベントターゲットになります。windowオブジェクトやdocumentオブジェクト、ドキュメントのすべてのElemnetオブジェクトなどがそうです。このaddEventListener()を使って、イベントターゲットにイベントハンドラを登録できます。引数は3つ指定します。1番目の引数はには、イベントハンドラを登録するイベントタイプを指定します。イベントタイプは、文字列形式で指定します。イベントハンドラプロパティを設定するときに使った「on」接頭辞は必要ない。2番目の引数には、指定したイベントタイプが発生したときに呼び出される関数を指定します。3番目の引数には、理論値を指定します。
falseを指定するのが普通です。tureを指定した場合は、イベントをキャプチャリングするイベントハンドラとして登録され、イベント伝播において、通常とは異なる段階で呼び出されるようになります。
--------------------------------------------------------------------------------------------------------------------
<button id="mybutton">Click me</button>
<script>
var b = document.getElementId("mybutton");
b.onclick = function(){alert("Thank you for click me!")};
b.addEventListener("click", function(){ alert("Thank again!");},false);
</script)
--------------------------------------------------------------------------------------------------------------------
1番目の引数に"click"を指定して、addEventListener()を呼び出しても、onclickプロパティの値は、変化しません。先ほどのコードではボタンクリックすると、２つのalert()ダイヤログボックス表示されます。addEventListener()を複数起こせば、同じオブジェクトの同じイベントハンドラ関数を登録できます。
webブラウザに表示されている内容は、基本的にHTMLDocumentとHTMLElementの組み合わせによって組み立てられている。Documentをルートとして、そこからHTMLの構造に従ってくみこまれていくHTMLElementオブジェクトの構造は、一般にDOMツリーと呼ばれている。
このDOMツリーは、そのページのHTMLコードの読み込みに応じて構築されていきます。HTMLコードのタグを読み込まれると、DOMオブジェクトが作成され、完成しているオブジェクトに組み込まれていく。
重要なのは、「まだ読み込みが完了していないタグのDOMオブジェクトは完成していない」という点です。完成していないオブジェクトは、操作することもできません。
onload属性の利用
<body>タグを見ると、onload="int()"という属性が指定されている。
実行しているスクリプトはiniという関数での形で定義されていることがわかる。
これは、この<script>タグが読み込まれた際に実行されてはいなかったのです。
onload属性は、イベントに対する属性でこのタグが読み込まれ、DOMツリーが完成した後で実行される処理を示すもの。
HTMLの表示に関する主要タグには、こうしたイベントに関する属性がいろいろ用意されている。このイベントは、特定の操作や状況に応じて発生する信号。このイベントはスクリプトに埋め込むこともできるし、イベントに用意されたプロパティに値を設定しておくことで、状況に応じて自動に実行されるようにできる。
DOMオブジェクトを取得するメソッド
IDで取得する。
変数 = document.getElementByID(IDの指定)
そのタグにID属性の値を指定することでDOMオブジェクトを取得します。
ID属性はユニークな値でなければいけない。
名前で取得する。
変数 = document.getElementByName(nameの指定)
nameを利用してDOMオブジェクトを取得するためのもの。getElementByIdと同様に、引数にnameの値を指定すると、そのnameのDOMオブジェクトが返されます。ただし、注意すべきは「返り値はリストになる」という点です。
クラス名で取得する。
変数 = document.getElementByClass(Classの指定)
HTMLタグに設定しているスタイルシートのクラス名でDOMオブジェクトを取得します。引数には、クラス名を指定します。
タグ名で取得する。
変数 = document.getElementByTagName(タグ名の指定)
タグの種類を指定してDOMオブジェクトを取得するもの。引数はタグ名の文字列を指定します。getElementByTagName("p")とすれば<p>タグのDOMオブジェクトすべてを取得できる。
