minimize

DOM2では、全ての Node がイベントを受け取る事が出来ます。
つまり、あらゆるエレメントがその対象となります。

EventTarget

このインターフェイスにより、イベントの登録などを行います。
先程の説明通り、全ての Node はこのインターフェイスを持っています。

document.addEventListener("mousemove", funcMouseMove, true);
function funcMouseMove(event) {
  ...
}

addEventListener(type, listener, useCapture)

イベントを登録します。

type

登録するイベントの種別を決定します。
具体的な種別名は イベント一覧 参照。

listener

イベント発生時に呼び出されるリスナオブジェクト名を決定します。
通常、これは関数(function)名になります。

useCapture

キャプチャを使用する場合に true を指定します。
簡単に言えば、true にすると「本来のイベント発生前」にメソッドが呼び出され
false にすると「本来のイベント発生後」にメソッドが呼び出されます。
ほとんどの場合で true を使う事になるはずです。

removeEventListener(type, listener, useCapture)

イベントを削除します。
引数は addEventListener と同じです。

dispatchEvent(event)

イベントを発生させます。

Event

全てのイベントが持つ基底インターフェイスです。
イベントが発生すると、このインターフェイスを実装したオブジェクトが
メソッドの引数として渡されてきます。

load / unload / abort / error / select / change /
submit / reset / focus / blur / resize / scroll イベントは、このインターフェイスを持っています。

type

イベント種別名を返します。
これを含め、このインターフェイスが持つ全ての属性は readonly です。

target

このイベントが発生したターゲットそのものを返します。

currentTarget

このイベントを実際に処理しているターゲットを返します。

eventPhase

イベント発生フェーズを返します。
AT_TARGET / BUBBLING_PHASE / CAPTURING_PHASE のいずれかになります。

bubbles

bubblingイベントの場合には true を返します。
イベント種別により予め決められています。

cancelable

イベントをキャンセルできる場合には true を返します。
イベント種別により予め決められています。

timeStamp

イベントが発生した時点のタイムスタンプをミリ秒単位で返します。
基準時は特に定義されていない為、これから時刻などを求めるのは止めた方がいいです。
相対的に「前回のイベントが発生してから何秒経過したか」などに使いましょう。

stopPropagation()

イベントは「キャプチャ有イベント→デフォルトイベント→キャプチャ無イベント」
の順で処理されていきますが、これを呼び出すとその後のイベントが発生しなくなります。

preventDefault()

詳細は不明です。

initEvent(eventTypeArg, canBubbleArg, cancelableArg)

詳細は不明です。

UIEvent

DOMFocusIn / DOMFocusOut / DOMActivate イベントが持つインターフェイスです。
Event から派生しています。

interface UIEvent implements Event;
view

イベントが発生したビューを返します。型は AbstractView です。

detail

イベントの詳細情報を、long型で返します。

initUIEvent(...)

詳細は不明です。

MouseEvent

click / mousedown / mouseup / mouseover / mousemove / mouseout イベントが持つインターフェイスです。
UIEvent から派生しています。

interface MouseEvent implements UIEvent;
screenX

スクリーン上のX座標を返します。

screenY

スクリーン上のY座標を返します。

clientX

ブラウザ内のX座標を返します。

clientY

ブラウザ内のY座標を返します。

ctrlKey

Ctrlキーが押されていれば true を返します。

shiftKey

Shiftキーが押されていれば true を返します。

altKey

Altキーが押されていれば true を返します。

metaKey

Metaキーが押されていれば true を返します。

button

押されているボタンを返します。
0: 左ボタン、1: 真ん中ボタン、2: 右ボタン

relatedTarget

関連するターゲットを返します。
mouseover / mouseout でのみ有効です。

initMouseEvent(...)

詳細は不明です。

KeyboardEvent

正確にはキーボードイベントが定義されたのはDOM3なので
このページに載せるのも変なのですが
需要の高いイベントと思われるので、ここで紹介することにします。

keydown / keyup イベントが持つインターフェイスです。
UIEvent から派生しています。

interface KeyboardEvent implements UIEvent;
keyIdentifier

押されたキーの種類を文字列型で返します。
定義文字列については、ここ を参照して下さい。

keyLocation

使用されているキーボードのキー配列種別を返します。

ctrlKey

Ctrlキーが押されていれば true を返します。

shiftKey

Shiftキーが押されていれば true を返します。

altKey

Altキーが押されていれば true を返します。

metaKey

Metaキーが押されていれば true を返します。

実装について

キーボードイベントについては実装がブラウザ毎にまちまちです。
ほとんどのブラウザはまだこの KeyboardEvent を実装していません。
多くの人が使っている keypress イベントも、DOM2(3)では定義されていません。
ですから残念ながら、この部分はブラウザ毎に処理を分ける必要があります。
もちろん、そういった非共通部分は関数化しておきましょう。

とりあえず、ブラウザ毎の簡単な説明です。

他のブラウザについては未調査です。

イベント一覧

[コメント(0)]