Eventオブジェクトは、DOMレベル2で定義されています。
Internet Explorerは標準のDOMイベントモデルをサポートしていないため、IEとそれ以外ではプロパティが大きく異なります。
イベントタイプに固有のイベントプロパティは、
のように階層化されて定義されています。
| プロパティ | 内容 |
|---|---|
| bubbles | イベントがバブリングするならば、true |
| cancelBubble | イベントのバブリングがキャンセルされたならば、true |
| cancelable | イベントをキャンセルできるならば、true |
| defaultPrevented | イベントの既定の処理がキャンセルされたならば、true |
| eventPhase | イベントフローの現在のフェーズ
|
| target | イベントを発生したオブジェクトへの参照 |
| currentTarget | イベントが割り当てられたオブジェクトへの参照 |
| timeStamp | イベントが発生した時刻 |
| type | イベントの名前 |
targetとcurrentTargetは、イベントが割り当てられたオブジェクトでイベントが発生した場合には、同じオブジェクトとなります。しかしそれらが異なる場合、つまりイベントフェーズでのキャプチャフェーズやバブルフェーズでは、異なるオブジェクトへの参照となります。
たとえば、次のように要素が定義されているとき、
<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 );
このとき、
と表示されます。つまりA2をクリックしたときは、イベントが発生したのがa2であるからtargetはa2となり、それを捕捉したのがイベントが登録されたa1であるから、currentTargetはa1となります。Comparison of Event Targets - Web API Interfaces | MDN
すべてのイベントで共通のプロパティを持ちます。
イベントに関する情報は、イベントハンドラに引数として渡されるEventオブジェクトにより取得できます。しかしIEイベントモデルではattachEvent()で登録されたイベント以外には引数で渡されないため、Windowオブジェクトのeventプロパティから取得する必要があります。
以上のことをふまえると、Eventオブジェクトは次のようにして取得します。
function EventHandler( event )
{
var e = event || window.event;
}
イベントの既定の処理を中止する方法は、イベントハンドラの登録方法によって異なります。
<a onclick="return false;" href="/">
イベントハンドラから値を返すことによって、イベントの既定の処理を中止できます。基本的にはfalseを返します。ただしonmouseoverだけ例外で、trueを返す必要があります。
element.onclick = function()
{
return false;
};
| 分類 | イベントハンドラ |
|---|---|
| フォーム | onsubmit |
| onreset | |
| キー | onkeydown |
| onkeypress | |
| マウス | onclick |
| onmousedown | |
| onmouseup | |
| onmouseover |
Event.preventDefault()を実行することで、イベントの既定の処理を中止できます。event.preventDefault - DOM | MDN
element.addEventListener( 'click',
function( event )
{
var e = event || window.event;
e.preventDefault();
}, false );
すべてのイベントで既定の処理を中止できるわけではなく、その可否はEventオブジェクトのcancelableプロパティで確認できます。
Event.returnValueにfalseを設定します。returnValue | MSDN
element.onclick = function( event )
{
var e = event || window.event;
e.returnValue = false;
};