☆　イベントオブジェクト(Fire Fox)

［書式］　document.イベント

document.onmousemove	マウスが移動した
document.onmousedown	マウスボタンが押された
document.onmouseup	マウスボタンが離された
document.onclick	マウスボタンがクリックされた
document.onkeydown	キーが押された
document.onkeyup	キー離された
［例］document.onclick=disp;	マウスがクリックされたら関数disp(event)を実行
呼び出し側では、 disp; と引数をつけない関数では、 disp(引数) とするこの、引数がイベントを示す変数（名前は任意）となる

1)　event.type : イベントタイプ（マウスやキーのクリック等）

<HTML>
<HEAD>
<TITLE>Event Type</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function disp(event)
{
  document.forms[0].elements[0].value=event.type ;
}

function disp1(event)
{
  document.forms[0].elements[1].value=event.type ;
}

function disp2(event)
{
  document.forms[0].elements[0].value=event.type ;
  document.forms[0].elements[1].value="" ;
}
</SCRIPT>
</HEAD>
<body bgcolor="#aaccff" text="#000000" background="1.jpg" topmargin=10 leftmargin=10>
<center>
<form name="msa" method="post">
<input size=40 name="ea" type="text" value=""><br>
<input size=40 name="eb" type="text" value="">
</form>
<br><br>
<SCRIPT LANGUAGE="JavaScript">
document.onmousedown = disp;
document.onmouseup = disp;
document.onclick = disp1;
document.onmousemove = disp2;
document.onkeydown = disp2;
document.onkeyup = disp2;
</SCRIPT>
</center>
</BODY>
</HTML>

この下のウィンドウで、マウスやキーの操作をしてください。
行った操作を示す文字列がフォームに表示されます。
マウス・キー共に「押す」と「離す」は別のイベントです。
下のフォームはマウスクリック（押して離す）時に表示されます。

2)　キーイベント

event.which	クリックされたキーの(ASCII)コード
str = String.fromCharCode(コード)	コードの文字（，で区切って複数指定すれば文字列）
event.shiftKey	Shiftキーが押されていたかどうかを示す真偽値
event.ctrlKey	Ctrlキーが押されていたかどうかを示す真偽値
event.altKey	Altキーが押されていたかどうかを示す真偽値

<HTML>
<HEAD>
<TITLE>Key Event</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function disp(event)
{
  document.forms[0].elements[0].value=event.type ;
  document.forms[0].elements[1].value=event.which ;
  document.forms[0].elements[2].value=String.fromCharCode(event.keyCode) ;
  document.forms[0].elements[3].value=event.shiftKey ;
  document.forms[0].elements[4].value=event.ctrlKey ;
  document.forms[0].elements[5].value=event.altKey ;
}
</SCRIPT>
</HEAD>
<body bgcolor="#aaccff" text="#000000" background="2.jpg" topmargin=10 leftmargin=10>
<center>
<form name="msa" method="post">
<table border=0>
<tr>
<td align=left><font color=ffffff size=4>EVENT:</font></td>
<td align=left><input size=12 name="type" type="text" value=""></td>
</tr>
<tr>
<td align=left><font color=ffffff size=4>CODE:</font></td>
<td align=left>
<input size=5 name="code" type="text" value="">
<input size=5 name="char" type="text" value="">
</td>
</tr>
<tr>
<td align=left><font color=ffffff size=4>SHIFT:</font></td>
<td align=left><input size=12 name="shift" type="text" value=""></td>
</tr>
<tr>
<td align=left><font color=ffffff size=4>CTRL:</font></td>
<td align=left><input size=12 name="ctrl" type="text" value=""></td>
</tr>
<tr>
<td align=left><font color=ffffff size=4>ALT:</font></td>
<td align=left><input size=12 name="alt" type="text" value=""></td>
</tr>
</form>
<br><br>
<SCRIPT LANGUAGE="JavaScript">
document.onkeydown = disp;
document.onkeyup = disp;
</SCRIPT>
</center>
</BODY>
</HTML>

この下のウィンドウでマウスをクリックした後、キー操作をしてください。

3)　マウスイベント

event.screenX event.screenY	イベントが発生した場所のスクリーン上の座標
event.clientX event.clientY	イベントが発生した場所のクライアント領域（ウィンドウ）上の座標
event.pageX event.pageY	マウスのページ上の座標
event.layerX event.layerY	マウスのレイヤー上の座標
window.pageXOffset window.pageYOffset	スクロールされているときに、ページのどの部分が画面に表示されているかを示す
event.type	発生したイベント
event.which	クリックしたボタン（左：１／中央：２／右：３）

<HTML>
<HEAD>
<TITLE>Mouse Event</TITLE>
<SCRIPT LANGUAGE="JavaScript">

function disp(event)
{
  document.msa.sx.value= event.screenX;
  document.msa.sy.value= event.screenY;
  document.msa.cx.value= event.clientX;
  document.msa.cy.value= event.clientY;
  document.msa.px.value= event.pageX;
  document.msa.py.value= event.pageY;
  document.msa.lx.value= event.layerX;
  document.msa.ly.value= event.layerY;
  document.msa.ox.value= window.pageXOffset;
  document.msa.oy.value= window.pageYOffset;
  document.msa.bt.value= event.type;
  document.msa.bw.value= event.which;
}
</SCRIPT>
</HEAD>
<body bgcolor="#aaccff" text="#ffffff" background="4.jpg" topmargin=10 leftmargin=10>
<center>
<form name="msa" method="post">
<table border=0>
<tr>
<td align=left><font color=ffffff size=4>SCREEN:</font></td>
<td align=left>
X<input size=6 name="sx" type="text" value="">
Y<input size=6 name="sy" type="text" value="">
</td></tr>
<tr>
<td align=left><font color=ffffff size=4>CLIENT:</font></td>
<td align=left>
X<input size=6 name="cx" type="text" value="">
Y<input size=6 name="cy" type="text" value="">
</td></tr>
<tr>
<td align=left><font color=ffffff size=4>PAGE:</font></td>
<td align=left>
X<input size=6 name="px" type="text" value="">
Y<input size=6 name="py" type="text" value="">
</td></tr>
<tr>
<td align=left><font color=ffffff size=4>Page-Offset:</font></td>
<td align=left>
X<input size=6 name="ox" type="text" value="">
Y<input size=6 name="oy" type="text" value="">
</td></tr>
<tr>
<td align=left><font color=ffffff size=4>LAYER:</font></td>
<td align=left>
X<input size=6 name="lx" type="text" value="">
Y<input size=6 name="ly" type="text" value="">
</td></tr>
<tr>
<td align=left><font color=ffffff size=4>ボタン:</font></td>
<td align=center>
<input size=14 name="bt" type="text" value="">
<input size=14 name="bw" type="text" value="">
</td></tr>
</table>
</form>
<br><br>
<center>
<LAYER id="pa" style="position:absolute; z-index:1; top:0px; left:0px;">
<img src="rena.jpg">
</LAYER>
</center>
<SCRIPT LANGUAGE="JavaScript">
document.onmousemove =  disp;
document.onmousedown = disp;
document.onmouseup = disp;
</SCRIPT>
</center>
</BODY>
</HTML>

下の「実行」をクリックして新しいウィンドウを開いてください。
ウィンドウは、背景の異なる左右２つのフレームで構成されます。
左右の違いは、 LAYER タグの position の部分だけです。
- 左は、 absolute としています。
- 左は、 relative としています。
- シルエットの画像上で、レイヤ座標を比較してください。
- レイヤ座標は、 absolute または relative で有効となります。
開いたウィンドウ全体を移動させて、マウス移動で表示される座標をみる。
マウスボタンをクリックしてみる。

☆ イベントオブジェクト(Fire Fox)

［書式］ document.イベント

☆　イベントオブジェクト(Fire Fox)

［書式］　document.イベント