イベントオブジェクトとは
イベントオブジェクトには、イベントが発生したときの情報（キーやマウスのイベント情報）が格納されます。
イベントオブジェクトは、イベントリスナーをセットする addEventListener()（ IE では、attachEvent() ） 関数から指定された JavaScript の関数には自動的に引数として与えられます。この場合のイベントオブジェクトは、e とう変数に与えられます。
イベントリスナーをセットする古い方法 document.getElementById('id 名').onclick = 指定関数オブジェクト; の記述の場合、Firfox ではイベントオブジェクト e が引数として与えられますが、IE の場合は与えられません。IE の場合は、event として与えられます。
HTML のタグ内に記述する場合は、onclick = 関数名(event) のように記述すれば、イベントオブジェクトを受け取ることができます。この場合の引数は、e ではなく、 event です。
イベントオブジェクトのプロパティ
イベントオブジェクトのプロパティには、次のようなものがあります。
- target ターゲットノード（ IE では srcElement ）
- target.id ターゲットノードの id 名
- target.tagName ターゲットノードの tag 名
- type イベント名を返す
- clientX マウスポインターのブラウザ左上を基準にしたX座標
- clientY マウスポインターのブラウザ左上を基準にしたY座標
- ctrlKey Ctrlキーが押されたときイベントが発生すると true
- button どのマウスボタンが押されたか 左 0、右 2、中央 1or4
他にもプロパティはありますが、これらよく利用されそうなイベントオブジェクトのプロパティをつかったサンプルを作ってみました。マウスを動かしたり、クリックしたりして、イベントの動きを理解してください。
サンプル： イベントオブジェクトのプロパティ
イベントオブジェクトのプロパティのサンプルソースコード
上記サンプルプログラムのソースコードは、次の通りです。スタイルシートと JavaScript のコードは、HTML 内に書いていますが、このまま外部ファイルにすることができます。
target プロパティについてだけ少し説明をします。これは、イベントが発生したターゲットノードを参照するプロパティです。IE には使えませんので、srcElement を使用します。target プロパティのままですと表示できませんので、target.id （ id 名）やtarget.tagName （ tagd 名）属性を使用します。また、target プロパティは、イベントリスナーがセットされた箇所で引き渡されすが、イベントリスナーがセットされたノードに子ノードがある場合、子ノードの情報が引き渡されます。したがって、子ノードに id 名がないばあは、target.id には null が入ります。イベントリスナーをセットした id 名を取得したい場合は、このサンプルのように id 名のついた親ノードを探していく方法で取得できます。（目的の親ノードまで、id 名のついたノードが無いことが条件です。）
js_evntprp.html のソースコード
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
#target {
width:300px;
height:150px;
text-align:center;
background-color:yellow;
}
span {
background-color:white;
}
#inner {
background-color:aqua;
}
</style>
<script type="text/javascript">
//イベントオブジェクトのプロパティチェック
function eProperty(e) {
document.getElementById('type').childNodes[0].nodeValue = e.type;
document.getElementById('clientx').childNodes[0].nodeValue = e.clientX;
document.getElementById('clienty').childNodes[0].nodeValue = e.clientY;
document.getElementById('ctrlkey').childNodes[0].nodeValue = e.ctrlKey;
document.getElementById('button').childNodes[0].nodeValue = e.button;
//ターゲットノッド
var target_nod;
if(e.target){
target_nod = e.target;
}else{
target_nod = e.srcElement;//IE用
}
document.getElementById('target_id').childNodes[0].nodeValue = target_nod.id;
document.getElementById('target_tag').childNodes[0].nodeValue = target_nod.tagName;
//ノードのid名、名が無かったら親ノードを探す
var target_nod_par = target_nod;
while (target_nod_par.id ==''){
target_nod_par = eval('target_nod'+'.parentNode');
}
document.getElementById('target_nod_par').childNodes[0].nodeValue = target_nod_par.id;
}
/*
//Firefox には イベントプロパティ e が渡されるが IE は未対応
window.onload = function(){
document.getElementById('target').onclick=eProperty;
}
*/
function setListener(){
var el = document.getElementById("target");
//関数へのリファレンスを利用する方法—'()' は無い
addListener(el,'click',eProperty,false);
addListener(el,'mouseover',eProperty,false);
addListener(el,'mouseout',eProperty,false);
addListener(el,'mouseup',eProperty,false);
}
//IE でも使えるようにしたイベントリスナー関数
function addListener(target,type,listener,useCapture) {
if (target.addEventListener){
target.addEventListener(type,listener,useCapture);
} else if (target.attachEvent){
target.attachEvent('on' + type,listener);
}
}
//Web ページがロードされたとき実行
addListener(window,'load',setListener,false);
</script>
<title>JavaScript イベントオブジェクトのプロパティ</title>
</head>
<body>
JavaScript イベントオブジェクトのプロパティ<br>
クリック、マウスオーバー、マウスアウトのイベントが有効
<p id='target'>タグ名 p ： id 名 target<br><br>
<span id='inner'>タグ名 span ： id 名 inner</span><br><br>
<span>タグ名 span ： id 名なし</span><br>
</p>
<div>イベントタイプ：<span id='type'> </span></div>
<div>ターゲット id 名：<span id='target_id'> </span></div>
<div>ターゲット tag 名：<span id='target_tag'> </span></div>
<div>ターゲット id 名がない場合の親 id 名：<span id='target_nod_par'> </span></div>
<div>ブラウザ上の X 座標：<span id='clientx'> </span></div>
<div>ブラウザ上の Y 座標：<span id='clienty'> </span></div>
<div>Ctrl キーが押されているか：<span id='ctrlkey'> </span></div>
<div>どのマウスボタンが押されたか：<span id='button'> </span></div>
</body>
</html>
