Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Introduction

この章では DOM Event Model を解説します。 Event インターフェイスを解説し、同様に DOM ノードへのイベント登録インターフェイス、イベントリスナを解説します。そして、さまざまなイベントインターフェイスがお互いにどのように関連しているのかを示す長めの例をいくつか掲載します。

DOM における3段階のイベントの流れをはっきり説明する優れた図が DOM Level 3 Events draft にあります。

また、例5: イベント伝播 (propagation) も参照するとよいでしょう。DOM の中でイベントがどのように動くかについてのより詳しい例があります。

イベントリスナを登録する

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

EventTarget.addEventListener

// myButtonがボタン要素であるとして
myButton.addEventListener('click', function(){alert('Hello world');}, false);

これは、あなたが現代のウェブページで使用するべき方法です。

ノート: Internet Explorer 6-8 はこの方法をサポートしませんでした。そして、その代わりに類似した element.attachEvent API を提供しました。クロスブラウザ互換性のために、利用できる多くの JavaScript ライブラリの1つを使ってください。

より多くの詳細は、EventTarget.addEventListener 参照ページで見つかります。

HTML属性

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

属性を使った JavaScript コードは、event 引数を通してイベントオブジェクトを渡されます。戻り値は特別な方法で扱われます。HTML仕様書に説明があります。

この方法は避けるべきです。これはマークアップを大きくし、読みづらくします。「コンテンツ/構造」と「ふるまい」の関係がうまく切り離されません。そして、見つけるのが難しいバグをつくります。

DOM要素のプロパティ

// myButtonがボタン要素であるとして
myButton.onclick = function(event){alert('Hello world');};

event 引数をとる関数を定義できます。戻り値は特別な方法で扱われます。HTML仕様書に説明があります。

この方法の問題は、ひとつの要素のひとつのイベントにつき、ひとつのハンドラしかセットできないことです。

DOM Event インターフェイス

イベントハンドラはDOM要素、文書、ウインドウオブジェクト、その他さまざまなオブジェクトに付けられる可能性があります。イベントが起きたとき、イベントオブジェクトがつくられて、順番にイベントリスナに渡されます。

ハンドラ関数に最初の引数として渡されるイベントオブジェクトを通して、DOM Event インターフェイスを利用できます。以下の単純な例で、イベントオブジェクトがどのようにイベントハンドラ関数に渡され、そしてそのような関数内でどのように使われるかを示します。

function foo(evt) {
  // evt引数はイベントオブジェクトを自動的に割り当てられます
  alert(evt);
}
table_el.onclick = foo;

DOM event subclasses

Properties

event.bubbles
イベントが浮上(bubble up)するか、boolean値を示します。
event.cancelBubble
そのイベントの浮上(bubbling)がキャンセルされたか、boolean値を示します。
event.cancelable
イベントがキャンセル可能か、boolean値を示します。
event.currentTarget
イベントが現在登録されているターゲットへの参照。
event.defaultPrevented
event.preventDefault() がイベントで呼ばれたかどうか示します。
event.eventPhase
現在評価されているのがイベントの流れのうちどの段階にあたるのかを示します。
event.explicitOriginalTarget
イベントの明確な最初のターゲット。(Mozilla特有)
event.originalTarget
イベントの再ターゲット前の最初のターゲット。(Mozilla特有)
event.target
イベントが最初に送出されたターゲットへの参照。
event.timeStamp
イベントが生成された時刻。
event.type
イベントの名前。(大文字小文字を区別しない)
event.isTrusted
イベントがブラウザによって開始されたか (たとえばユーザクリックの後)、または、スクリプトによって開始されたか (event.initEvent のようなイベントを作るメソッドの使用) どうかを示します。

Methods

event.initEvent
DocumentEvent インターフェイスによって生成されたイベントの値を初期化します。
event.preventBubble 廃止 Gecko 24
イベントが浮上(bubbling)しないようにします。廃止されたので、代わりに stopPropagation を使ってください。
event.preventCapture 廃止 Gecko 24
廃止されたので、stopPropagation を使ってください。
event.preventDefault
イベントをキャンセルします。(キャンセル可能な場合のみ)
event.stopImmediatePropagation
この特定のイベントのために、他のいかなるリスナも呼び出されません。 同じ要素に付けられたリスナも、後で横断される要素に付けられたリスナも(たとえばキャプチャ段階の)。
event.stopPropagation
これ以上イベントが伝播(propagation)するのを停止します。

See also

 

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: AshfaqHossain, siokoshou, ethertank, Yukoba, Luna8bit
 最終更新者: AshfaqHossain,