イベント (event)

Eventオブジェクト

Eventオブジェクトは、DOMレベル2で定義されています。

イベントのプロパティ

Internet Explorerは標準のDOMイベントモデルをサポートしていないため、IEとそれ以外ではプロパティが大きく異なります。

標準プロパティ (Internet Explorer以外)

イベントタイプに固有のイベントプロパティは、

のように階層化されて定義されています。

プロパティ 内容
bubbles イベントがバブリングするならば、true
cancelBubble イベントのバブリングがキャンセルされたならば、true
cancelable イベントをキャンセルできるならば、true
defaultPrevented イベントの既定の処理がキャンセルされたならば、true
eventPhase イベントフローの現在のフェーズ
  • 0 … Event.NONE
  • 1 … Event.CAPTURING_PHASE
  • 2 … Event.AT_TARGET
  • 3 … Event.BUBBLING_PHASE
target イベントを発生したオブジェクトへの参照
currentTarget イベントが割り当てられたオブジェクトへの参照
timeStamp イベントが発生した時刻
type イベントの名前
targetとcurrentTargetの違い

targetcurrentTargetは、イベントが割り当てられたオブジェクトでイベントが発生した場合には、同じオブジェクトとなります。しかしそれらが異なる場合、つまりイベントフェーズでのキャプチャフェーズやバブルフェーズでは、異なるオブジェクトへの参照となります。

たとえば、次のように要素が定義されているとき、

<div id="a1">A1
  <div id="a2">A2
  </div>
</div>

id="a1"の要素への'click'を捕捉するとします。

var a1 = document.getElementById( 'a1' );
a1.addEventListener( 'click', function( event )
    {
        var e = event || window.event;

        alert( 'target:' + e.target.id );
        alert( 'currentTarget:' + e.currentTarget.id );
    }, false );

このとき、

  • A1をクリック … target:a1 / currentTarget:a1
  • A2をクリック … target:a2 / currentTarget:a1

と表示されます。つまりA2をクリックしたときは、イベントが発生したのがa2であるからtargetはa2となり、それを捕捉したのがイベントが登録されたa1であるから、currentTargetはa1となります。Comparison of Event Targets - Web API Interfaces | MDN

Internet Explorerのプロパティ

すべてのイベントで共通のプロパティを持ちます。

Eventオブジェクトの取得

イベントに関する情報は、イベントハンドラに引数として渡されるEventオブジェクトにより取得できます。しかしIEイベントモデルではattachEvent()で登録されたイベント以外には引数で渡されないため、Windowオブジェクトのeventプロパティから取得する必要があります。

以上のことをふまえると、Eventオブジェクトは次のようにして取得します。

function EventHandler( event )
{
    var e = event || window.event;
}

イベントの既定の処理の無効化

イベントの既定の処理を中止する方法は、イベントハンドラの登録方法によって異なります。

HTML属性

<a onclick="return false;" href="/">

DOMレベル0

イベントハンドラから値を返すことによって、イベントの既定の処理を中止できます。基本的にはfalseを返します。ただしonmouseoverだけ例外で、trueを返す必要があります。

element.onclick = function()
{
    return false;
};
分類 イベントハンドラ
フォーム onsubmit
onreset
キー onkeydown
onkeypress
マウス onclick
onmousedown
onmouseup
onmouseover

DOMレベル2

Event.preventDefault()を実行することで、イベントの既定の処理を中止できます。event.preventDefault - DOM | MDN

element.addEventListener( 'click',
    function( event )
    {
        var e = event || window.event;
        e.preventDefault();
    }, false );

すべてのイベントで既定の処理を中止できるわけではなく、その可否はEventオブジェクトのcancelableプロパティで確認できます。

Internet Explorerのイベントモデル

Event.returnValueにfalseを設定します。returnValue | MSDN

element.onclick = function( event )
{
    var e = event || window.event;
    e.returnValue = false;
};

参考

仕様

参考書

  • JavaScript 第5版 [オライリー・ジャパン] David Flanagan
    17章「イベントとイベント処理」に、イベントについての解説があります。
JavaScriptのドキュメントから検索