イベント (Event)

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()

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

関連項目

 Back to top

© 2017 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。 構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • 特定のブラウザに特化しすぎている情報やあまりにも古い情報、 または試験的に導入されているようなAPIや機能については、省略していることがあります。
  • 例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、 その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
  • MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。