DOM:event
出典: MDC
目次 |
[編集] Introduction
この章ではGeckoにより実装された DOM Level 2 Event Model を解説します。 まずEvent インターフェースを解説し、DOM の node へのイベントの登録やイベントハンドラ・イベントリスナを併せて解説し、そして、さまざまな event インターフェースが相互にどのように関連しているのかを示す長めの例をいくつか掲載します。
DOM Level 3 Events draftにある優れた図は、DOM におけるこの3段階のイベントの流れを明瞭に説明したものです。
[編集] DOM Event インターフェース
イベントハンドラは DOM のさまざまな element に 関連付けられる可能性があります。イベントが発生したとき、event オブジェクトが動的に生成され、そのイベントを処理することになっているイベントリスナに逐次的に渡されます。このとき、DOM Event インターフェースは、イベントハンドラの関数の中で、その第一引数としてアクセス可能です。
以下のシンプルな例には、event オブジェクトがどのようにイベントハンドラ関数に渡されているのか、そしてそのような関数の中でどのように使われているのかが示されています。
以下のコードには "evt" を引数として渡す部分がないことに注意してください。event オブジェクトは自動的に foo に渡されます。必要なことは、イベントハンドラが event オブジェクトを受け取る引数を定義することだけです。
function foo(evt) {
// event handling functions like this one
// get an implicit reference to the event object they handle
// (in this case we chose to call it "evt").
alert(evt);
}
table_el.onclick = foo;
この例はこの上もなく単純ですが、Gecko DOM におけるイベント処理の重要な特徴を明示しており、それは、DOM における event オブジェクトが一般的にイベントハンドラ関数の中においてアクセスされるということです。そして、その event オブジェクトへの参照が得られたならば、この章で説明されている全てのプロパティとメソッドにアクセスすることができます。
また、Example 5: Event Propagation も参照するとよいでしょう。DOM の中でのイベントの動きについてのより詳しい説明の章があります。
[編集] DOM イベントハンドラのリスト
ここで解説されているevent オブジェクトに加えて、Gecko DOM にはイベントリスナを DOM の node に登録する方法、削除する方法、そして DOM からイベントを送出する方法も提供されています。HTML や XML の element におけるこれらの、そしてさまざまなイベントハンドラは、DOM のイベントへの主要なエントリポイントです。これらの3種の方法は、DOM Element Referenceの中のリストにおいて解説されています。
イベントを処理する関数には、eventという名前の定義済みの引数として event オブジェクトへのリファレンスを渡すこともできます。これは、thisと非常によく似た方法で機能しますが、element オブジェクトのリファレンスではなく、event オブジェクトへのリファレンスになります。
<html>
<head>
<title>event オブジェクトを引数として渡す例</title>
<script type="text/javascript">
function showCoords(evt){
alert(
"clientX value: " + evt.clientX + "\n" +
"clientY value: " + evt.clientY + "\n"
);
}
</script>
</head>
<body onmousedown="showCoords(event)">
<p>To display the mouse coordinates click anywhere on the page.</p>
</body>
</html>
必要な場合、以下のように、定義済み event オブジェクト引数により、イベントハンドラ関数に他の引数を渡すことができます。
<html>
<head>
<title>event オブジェクトと追加引数を渡す例</title>
<script type="text/javascript">
var par2 = 'hello';
var par3 = 'world!';
function showCoords(evt, p2, p3){
alert(
"clientX value: " + evt.clientX + "\n"
+ "clientY value: " + evt.clientY + "\n"
+ "p2: " + p2 + "\n"
+ "p3: " + p3 + "\n"
);
}
</script>
</head>
<body onmousedown="showCoords(event, par2, par3)">
<p>To display the mouse coordinates please click anywhere on the page.</p>
</body>
</html>
[編集] Properties
- event.altKey
- イベント中に
<alt>が押されたか、boolean値を返します。 - event.bubbles
- イベントが浮上(bubble up)するか、boolean値を返します。
- event.button
- マウスのキーを返します。
- event.cancelBubble
- 非推奨 そのイベントの浮上(bubble up)がキャンセルされたか、boolean値を返します。
- event.cancelable
- イベントがキャンセル可能か、boolean値を返します。
- event.charCode
- keypress イベントで、押された文字キーの Unicode 値を示します。
- event.clientX
- イベントの水平位置を返します。
- event.clientY
- イベントの垂直位置を返します。
- event.ctrlKey
- イベント中に
<ctrl>が押されたか、boolean値を返します。 - event.currentTarget
- イベントが現在登録されている target へのリファレンスを返します。
- event.detail
- イベントの種類に依存して、イベントの詳細を返します。
- event.eventPhase
- 現在評価されているのがイベントの流れのうちどの段階にあたるのかを示します。
- event.explicitOriginalTarget
- The explicit original target of the event (Mozilla-specific).
- event.isChar
- イベントが文字入力かどうか、boolean 値を返します。
- event.keyCode
- keypress イベントでは文字でないキーの、その他のキーボードイベントでは全てのキーの Unicode 値を返します。
- event.layerX
- 現在のレイヤー上における相対的な水平座標を返します。
- event.layerY
- 現在のレイヤー上における相対的な垂直座標を返します。
- event.metaKey
- イベント中に
<meta>が押されたか、boolean値を返します。 - event.originalTarget
- The original target of the event, before any retargetings (Mozilla-specific).
- event.pageX
- イベントのページ上における相対的な水平座標を返します。
- event.pageY
- イベントのページ上における相対的な垂直座標を返します。
- event.relatedTarget
- Identifies a secondary target for the event.
- event.screenX
- イベントのスクリーン上における水平位置を返します。
- event.screenY
- イベントのスクリーン上における垂直位置を返します。
- event.shiftKey
- そのイベント中に
<alt>が押されたか、boolean値を返します。 - event.target
- イベントが最初に送出された target への参照を返します。
- event.timeStamp
- イベントが生成された時刻を返します。
- event.type
- イベントの名前を返します。(大文字小文字を区別しない)
- event.view
- イベントの生成元の
AbstractViewを指定する view 要素です。 - event.which
- どんなキーが押されたかにかかわらず、キーボードイベントで押されたキーの Unicode 値を返します。
[編集] Methods
- event.initEvent
-
DocumentEventインターフェースによって生成されたイベントの値を初期化します。 - event.initKeyEvent
- キーボードイベントを初期化します。Gecko-specific
- event.initMouseEvent
- 生成時にマウスイベントを初期化します。
- event.initUIEvent
- 生成時にUIイベントを初期化します。
- event.preventBubble
- 廃止 イベントが浮上(bubble up)しないようにします。これは、標準のstopPropagation に取って代わられたため廃止され、Gecko 1.9 で削除されます。
- event.preventCapture
- 廃止 これは標準のstopPropagation に取って代わられたため廃止され、Gecko 1.9 で削除されます。
- event.preventDefault
- イベントをキャンセルします。(キャンセル可能な場合のみ)
- event.stopPropagation
- これ以上イベントが伝播(propagate)するのを停止します。