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
AnimationEvent
AudioProcessingEvent
BeforeInputEvent
BeforeUnloadEvent
BlobEvent
ClipboardEvent
CloseEvent
CompositionEvent
CSSFontFaceLoadEvent
CustomEvent
DeviceLightEvent
DeviceMotionEvent
DeviceOrientationEvent
DeviceProximityEvent
DOMTransactionEvent
DragEvent
EditingBeforeInputEvent
ErrorEvent
FocusEvent
GamepadEvent
HashChangeEvent
IDBVersionChangeEvent
KeyboardEvent
MediaStreamEvent
MessageEvent
MouseEvent
MutationEvent
OfflineAudioCompletionEvent
PageTransitionEvent
PointerEvent
PopStateEvent
ProgressEvent
RelatedEvent
RTCPeerConnectionIceEvent
SensorEvent
StorageEvent
SVGEvent
SVGZoomEvent
TimeEvent
TouchEvent
TrackEvent
TransitionEvent
UIEvent
UserProximityEvent
WheelEvent
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