Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。

イベントオブジェクトの扱いはブラウザによって異なり、利用には注意が必要です。Internet Explorerでは「window.event」、他のブラウザではイベントハンドラにイベントオブジェクトが渡されます。

「event」オブジェクト自体はSafari 2でもOperaでも存在し、Internet Explorer同様にアクセスすることができます。ただしFirefoxはダメ。（仕様上はFirefoxの処理が正しい）

なので実際に利用する際には、イベントオブジェクトの有無に応じてInternet Explorerと他ブラウザで処理を分ける必要があります。また、イベントオブジェクトで扱われる各種プロパティも、互換性のあるものはかなり限られます。特にイベント発生時の座標値には注意が必要。

IE

イベントオブジェクトは「window.event」。

プロパティ	説明
event.srcElement	イベントが発生した要素
event.type	発生したイベントのタイプ。"click" などの文字列。
event.screenX	スクリーン上のX座標
event.screenY	スクリーン上のY座標
event.clientX	ウィンドウ上のX座標
event.clientY	ウィンドウ上のY座標
event.x	配置された親要素（通常は BODY 要素）上のX座標
event.y	配置された親要素（通常は BODY 要素）上のY座標
event.offsetX	要素上のX座標
event.offsetY	要素上のY座標

Mozilla

イベントハンドラに引数としてイベントオブジェクトが渡されている。ちなみに以下では xxx という名前になっているが、ここは任意で決められる。通常は e や evt などとする場合が多い。

1. function getEvent(xxx)
2. {
3. xxx.プロパティ
4. }

プロパティ	説明
xxx.target	イベントが送られたオブジェクト
xxx.type	発生したイベントのタイプ。"click" などの文字列。
xxx.screenX	スクリーン上のX座標
xxx.screenY	スクリーン上のY座標
xxx.pageX	ページ上のX座標
xxx.pageY	ページ上のY座標
xxx.width	ウィンドウ上のX座標
xxx.height	ウィンドウ上のY座標
xxx.layerX	レイヤー上のX座標
xxx.layerY	レイヤー上のY座標

イベントを設定・解除する

• winndow.onload = function(){ func() };
• winndow.onload = func;

上記のような方法だと、後から指定したイベントで上書きされてしまう。DOMでのイベント設定を利用すれば、イベント処理を複数ストックする（キュー）ことができる。

メソッド	説明
addEventListener()	イベントに関数を登録する。関数は登録順に実行される。IEでは利用できない。
attachEvent()	イベントに関数を登録する。登録した関数の実行順はブラウザによって違う。
removeEventListener()	イベントに登録した関数を削除する。IEでは利用できない。
detachEvent()	イベントに登録した関数を削除する。

IEではaddEventListener()を利用できないため、代替としてattachEvent()を使用する。ただし、attachEvent()で登録した関数の実行順は謎なので、実行順が重要な場合は「関数を実行する関数」を設けるなど、工夫が必要。

1. function addEvent(elm, evType, fn, useCapture) {
2. if (elm.addEventListener) {
3. elm.addEventListener(evType, fn, useCapture);
4. return true;
5. }
6. else if (elm.attachEvent) {
7. var r = elm.attachEvent('on' + evType, fn);
8. return r;
9. }
10. else {
11. elm['on' + evType] = fn;
12. }
13. }

イベント登録用の関数。適用する要素、イベントタイプ、関数名、キャプチャリングの有無をそれぞれ指定する。キャプチャリング（addEventListener()の第三引数）については以下に記す。

false	発生した要素から順に実行される。通常はこっち。
true	直ちに実行される。true同士の場合、親のtrueが子のtrueより優先される。

多少複雑だけど、あるイベントタイプに限定すれば、以下のように簡潔な記述も可能です。

1. function addLoadEvent(func) {
2. var oldonload = window.onload;
3. if (typeof window.onload != 'function') {
4. window.onload = func;
5. }
6. else {
7. window.onload = function() {
8. oldonload();
9. func();
10. }
11. }
12. }

実装例

たとえば、キーコードを取得したい場合は以下のようになる。

1. addEvent(document,'keydown',getKeyCode);
2. function getKeyCode(evt) {
3. var keyC;
4. if(window.event) keyC = window.event.keyCode;
5. else if(evt) keyC = evt.which;
6.  
7. document.getElementById('keyCode').value = keyC;
8. }

keyCode:

関連項目

• マウス座標を取得する

参照サイト

• JavaScriptテクニックブック, OpenSpace
• Top 10 custom JavaScript functions of all time, ./with Imagination
• addEventListener の第三引数について, hogehoge
• キーボードのイベントプロパティ表示, JavaScript + Ajax 実践サンプル集