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
AnimationEventAudioProcessingEventBeforeInputEventBeforeUnloadEventBlobEventClipboardEventCloseEventCompositionEventCSSFontFaceLoadEventCustomEventDeviceLightEventDeviceMotionEventDeviceOrientationEventDeviceProximityEventDOMTransactionEventDragEventEditingBeforeInputEventErrorEventFocusEventGamepadEventHashChangeEventIDBVersionChangeEventKeyboardEventMediaStreamEventMessageEventMouseEventMutationEventOfflineAudioCompletionEventPageTransitionEventPointerEventPopStateEventProgressEventRelatedEventRTCPeerConnectionIceEventSensorEventStorageEventSVGEventSVGZoomEventTimeEventTouchEventTrackEventTransitionEventUIEventUserProximityEventWheelEvent
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
- 利用できるイベントのタイプ: Event reference
- イベントターゲットの比較(target vs currentTarget vs relatedTarget vs originalTarget)
- カスタムイベントをつくって、トリガする
- Firefox アドオン開発者向け:
- Mozilla related events in real life at wiki.mozilla.org