イベント (Event)

https://developer.mozilla.org/en-US/docs/Web/API/element

Eventインターフェースについて説明します。同様にDOMのノードへのイベント登録のためのインターフェース、イベントリスナー、また幾つかの長めの例により、様々なイベントのインターフェースの関連性について説明します。

DOM Level 3 Events 草案に、 DOMを巡るイベントフローの3つのフェーズを分かり易く説明した図があります。

DOMをイベントがどのように移動するかをより詳しく知るために、例5: イベント伝搬 (日本語)も参照してみてください。

イベントリスナーの登録
イベントインターフェース
関連項目

イベントリスナーの登録

DOM要素にイベントハンドラを登録する3つの方法が存在します。

EventTarget.addEventListener

// myButtonをボタン要素とみなします
myButton.addEventListener('click', function(){alert('Hello world');}, false);

モダンなWebページであれば、この方法を選択するべきです。

注意: Internet Explorer 6-8はこのメソッドをサポートしておらず、その代わりに同様の機能を持つelement.attachEventを提供します。クロスブラウザの互換性を考慮する必要がある場合は、利用可能な多くのJavaScriptライブラリのいずれかを使用すると良いでしょう。

詳細については、EventTarget.addEventListenerのページを参照してください。

HTML属性

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

属性内のJavaScriptコードは、イベントパラメーターを通じてEventオブジェクトが渡されます。 HTMLの仕様では、戻り値は特別な方法で扱われると説明されています。

この方法は避けるべきです。これは、マークアップを煩雑で読みにくいものにします。コンテンツの構造と挙動の関係が十分に分離されず、バグの発見が困難になります。

DOM要素のプロパティ

// myButtonはボタン要素とみなします。
myButton.onclick = function(event){alert('Hello world');};

イベントの引数を取得する関数を定義することが可能です。 HTMLの仕様では、戻り値は特別な方法で扱われると説明されています。

この方法の問題は、ハンドラは1つの要素と1つのイベント毎に、1つのハンドラしか設定出来ないことになります。

イベントインターフェース

イベントハンドラは、DOM要素、document、windowオブジェクト等を含む様々なオブジェクトに割り当てられている可能性があります。イベントが発生すると、イベントオブジェクトが作成され、順にイベントリスナーに渡されます。

イベントインターフェースは第1引数として渡されるイベントオブジェクトを通して、ハンドラ内の関数からアクセスする事が可能です。下記の例は、イベントオブジェクトがどのようにイベントハンドラの関数に渡され、その関数でどのように使用されるのかを説明したものです。

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

Eventサブクラス

プロパティ
.altKey

イベントの発火時に、ALTキーが押されたか否かを調べます。
.bubbles

DOMを通してのバブルアップのイベント伝搬か否かを調べます。
.button

イベント発生源であるマウスボタン
.cancelBubble 非推奨

このイベントのバブリングイベントが、キャンセルされたかどうかを示します。
.cancelable

イベントがキャンセル可能か否かを示します。
.charCode 非推奨

keypressイベントでの押された文字キーのユニコード値を返します。
.clientX

イベントが発生しているアプリケーションのクライアント領域での水平位置(ページ内の座標では無く)を返します。
.clientY

イベントが発生しているアプリケーションのクライアント領域での垂直位置(ページ内の座標では無く)を返します。
.ctrlKey

イベントが発火された際に、CTRLキーが押されているか否かを調べます。
.currentTarget

イベントがDOMを巡るものとして、現在のイベントのターゲットを調べます。
.defaultPrevented

event.preventDefault()がイベント上で呼び出されたか否かを示す真偽値を返します。
.detail

イベントのタイプによって、付加的なイベントについての数値情報を返します。
.eventPhase

現在評価中のイベントフローの局面(フェーズ)を示します。
.keyCode

keypressイベントでの非文字、または別のタイプのキーボードイベントでの何らかのキーのUnicode値を返します。
.layerX

現在のレイヤーの相対的なイベント発生場所の水平位置を返します。
.layerY

現在のレイヤーの相対的なイベント発生場所の垂直位置を返します。
.metaKey

イベントの発火時に、"meta"(メタ)キーが押されたか否かを調べます。
.pageX

ドキュメント全体の相対的なイベント発生場所の水平位置を返します。
.pageY

ドキュメント全体の相対的なイベント発生場所の垂直位置を返します。
.relatedTarget

イベントの二次ターゲットを示します。
.screenX

スクリーン全体としてのイベント発生場所の座標の水平位置を返します。
.screenY

スクリーン全体としてのイベント発生場所の座標の垂直位置を返します。
.shiftKey

イベント発火時に、SHIFTキーが押されていたか否かを調べます。
.target

イベントオブジェクト上でのこのプロパティは、イベントが送られたオブジェクトを示します。
.timeStamp

イベントが作成された時間(エポック(epoch) - 1970年1月1日の午前0時0分からの経過ミリ秒)を返します。
.type

イベントのタイプを含む文字列を返します。
.view

イベントが生成されたAbstractViewオブジェクトを返します。
.which

押されたキーのkeyCode、または文字コード(charCode)の数値を返します。
メソッド
.createEvent()

その後で、自身のinit()メソッドの呼び出しによって初期化されなければならない、新しいイベントを作成します。
.initKeyEvent()

document.createEvent("KeyboardEvent")を使用して作成されたイベントの値を初期化するのに使用されます。
.initMouseEvent()

作成された(通常、document.createEventが使用される)マウスイベントの値を初期化します。
.initUIEvent()

作成されたUIイベントを初期化します。
.preventDefault()

キャンセル可能なイベントであれば、それ以上の伝搬を停止することなく、そのイベントだけをキャンセルします。
.stopImmediatePropagation()

同じイベントの他のリスナーの呼び出しをキャンセルします。
.stopPropagation()

現在のイベントのそれ以上のイベント伝搬を防ぎます。