イベントと DOM

この章では DOM のイベントモデルを説明します。この Event インターフェイス自身は、 DOM のノード上にイベントを登録する為のインターフェイスと同様であり、イベントリスナーであるとも言えます。いくつかの長い例は、様々な Event インターフェイスがどのように他と関連するかを示します。

DOM レベル 3 イベントの原案に、DOM を通して 3 つのフェーズから構成されるイベントフローを明確に説明した素晴らしい説明図があります。

また、イベントが DOM 内をどのように伝播するかについては更に詳細なコード例、例 5: イベント伝播 (propagation) を参照してください。

DOM の要素にイベントハンドラーを登録する方法は 3 つあります。

// myButton は button 要素だと仮定します
myButton.addEventListener('click', greet, false);
function greet(event){
    // print and have a look at the event object
    // always print arguments in case of overlooking any other arguments
    console.log('greet:', arguments)
    alert('hello world')
}

これが最近のウェブページで使われる方法です。

さらに詳細を知りたい場合は EventTarget.addEventListener のリファレンスを参照してください。

<button onclick="alert('Hello world!')">

HTML 属性に書かれたこの JavaScript コードには、 event 引数を通してイベントオブジェクトが渡されます。返値は HTML の仕様で定義された特別な方法で処理されます。

// myButton は button 要素と仮定します
myButton.onclick = function(event){alert('Hello world')}

この関数は 1 つの event 引数を取るように定義できます。返り値は HTML の仕様で定義された特別な方法で処理されます。

この書き方の問題は、各要素の各イベント毎に 1 つだけしかハンドラーを設定できないことです。

イベントハンドラーは (DOM 要素や文書、 window オブジェクト等を含めた) 様々なオブジェクトに追加されるでしょう。イベントが発生すると、イベントオブジェクトが生成され順番にイベントリスナーが呼ばれます。

Event インターフェイスは、イベントハンドラーの内部からアクセス可能で、第 1 引数としてイベントオブジェクトを介して渡されます。以下のシンプルな例は、イベントハンドラーにどのようにイベントオブジェクトが渡され、その中でどのように使われるかを示します。

function print(evt) {
  // evt 引数は自動的にイベントオブジェクトに割り当てられます
  // console.log と alert の違いに注意してください
  console.log('print:', evt)
  alert(evt)
}
// どの関数も意味を持つ適切な名前を付けてください
table_el.onclick = print

• DOM リファレンス
• DOM への導入
• イベントと DOM
• 例