はじめに
この章では DOM のイベントモデルを説明します。この Event インターフェイス自身は、DOM のノード上にイベントを登録する為のインターフェイスと同様であり、イベントリスナーであるとも言えます。いくつかの長い例は、様々な Event インターフェイスがどのように他と関連するかを示します。
DOM レベル 3 イベントの原案に、DOM を通して 3 つのフェーズから構成されるイベントフローを明確に説明した素晴らしいダイアグラムがあります。
また、イベントが DOM 内をどのように伝播するかについては更に詳細なコード例、例 5: イベント伝播 (propagation) を参照してください。
イベントリスナーの登録
DOM の要素にイベントハンドラを登録する方法は 3 つあります。
EventTarget.addEventListener
// myButton は button 要素だと仮定します
myButton.addEventListener('click', function(){alert('Hello world');}, false);
これがモダンな Web ページで使われる方法です。
注意: Internet Explorer 6 から 8 はこの方法をサポートせず、EventTarget.attachEvent という似た API を代わりにサポートします。ブラウザ間の互換性 (cross-browser) のために、多くの JavaScript ライブラリを利用できます。
更に詳細を知りたい場合は EventTarget.addEventListener のリファレンスを参照してください。
HTML 属性
<button onclick="alert('Hello world!')">
HTML 属性に書かれたこの JavaScript コードは、イベントパラメータを通してイベントオブジェクトが渡されます。返り値は HTML の仕様で定義された特別な方法で処理されます。
この書き方は避けるべきです。HTML を巨大化し可読性を下げます。コンテンツと振る舞いが正しく分離されておらず、バグの発見を困難にします。
DOM 要素のプロパティ
// myButton は button 要素と仮定します
myButton.onclick = function(event){alert('Hello world');};
この関数は 1 つのイベントパラメータを取るように定義できます。返り値は HTML の仕様で定義された特別な方法で処理されます。
この書き方の問題は、各要素の各イベント毎に 1 つだけしかハンドラを設定できないことです。
Event インターフェイスへのアクセス
イベントハンドラは DOM 要素やドキュメント、window オブジェクト等を含めた様々なオブジェクトに追加されるでしょう。イベントが発生すると、イベントオブジェクトが生成され順番にイベントリスナーが呼ばれます。
Event インターフェイスは、イベントハンドラの内部からアクセス可能で、第 1 引数としてイベントオブジェクトを介して渡されます。以下のシンプルな例は、イベントハンドラにどのようにイベントオブジェクトが渡され、その中でどのように使われるかを示します。
function foo(evt) {
// evt パラメータは自動的にイベントオブジェクトに割り当てられます
alert(evt);
}
table_el.onclick = foo;