イベントハンドラ (event handler)

onloadやonclickなど、イベントハンドラはすべて小文字で記述します。

イベントハンドラ イベント 発生状況
onblur blur 要素が入力フォーカスを失ったとき
onchange change 要素が入力フォーカスを失ったときと、要素の値が変わったとき
onclick click マウスでクリックされたとき
oncontextmenu contextmenu  
ondblclick dblclick マウスでダブルクリックされたとき
onfocus focus 要素が入力フォーカスを得たとき
onkeydown keydown  
onkeypress keypress  
onkeyup keyup  
onmousedown mousedown  
onmousemove mousemove  
onmouseout mouseout  
onmouseover mouseover  
onmouseup mouseup  
onresize resize  
onscroll scroll  
イベントハンドラ - element - MDN
DOM event reference - MDN

イベントハンドラの登録と削除

HTMLの属性として設定

<body onload="FunctionName();">

イベントハンドラのプロパティとして設定

DOMレベル0

この方法ではオブジェクトに対して1つのイベントしか登録できないため、同一のイベントを後から登録すると先の登録を上書きします。

document.onload = FunctionName;
document.onload = null; // イベントの削除

DOMレベル2

DOMレベル2ならば、同一のオブジェクトに対して複数のイベントを登録できます。

document.addEventListener( 'load', FunctionName, false );
document.removeEventListener( 'load', FunctionName, false ); // イベントの削除

Internet Explorerのイベントモデル

document.attachEvent( 'onload', FunctionName );
document.detachEvent( 'onload', FunctionName ); // イベントの削除
※ IEのイベントモデルでは、イベントキャプチャリングをサポートしない。

クロスブラウザに対応したイベントの実装

クロスブラウザとするために、各メソッドが実装されているか確認しながら順に試行します。

イベントの登録

if( target.addEventListener ) // DOMレベル2
{
    target.addEventListener( 'mouseout', FunctionName, false );
}
else if( target.attachEvent ) // IEイベントモデル
{
    target.attachEvent( 'onmouseout', FunctionName );
}
else                          // DOMレベル0
{
    target.onmouseout = FunctionName;
}

イベントの削除

if( target.removeEventListener ) // DOMレベル2
{
    target.removeEventListener( 'mouseout', FunctionName, false );
}
else if( target.detachEvent )    // IEイベントモデル
{
    target.detachEvent( 'onmouseout', FunctionName );
}
else                             // DOMレベル0
{
    target.onmouseout = null;
}

イベントハンドラの明示的な呼び出し

イベントハンドラのプロパティを関数のように実行することで、イベントハンドラを明示的に呼び出せます。例えばonsubmitイベントハンドラは onsubmit()とします。

イベントハンドラ内のthisキーワード

イベントハンドラ内でthisキーワードが参照する値は、イベントモデルによって異なります。

イベントモデル 参照するオブジェクト
DOMレベル0 ハンドラが登録されたオブジェクト
DOMレベル2 未定義 (しかし通例は、ハンドラが登録されたオブジェクト)
IEイベントモデル Windowオブジェクト

汎用的にハンドラが登録されたオブジェクトを参照するには、EventオブジェクトのcurrentTargetプロパティを使用します。