☆　イベントオブジェクト(Internet Explorer)

［書式］　window.event.イベント

window.event.onmousemove	マウスが移動した
window.event.onmousedown	マウスボタンが押された
window.event.onmouseup	マウスボタンが離された
window.event.onclick	マウスボタンがクリックされた
window.event.onkeydown	キーが押された
window.event.onkeyup	キー離された
［例］window.event.onclick=disp()	マウスがクリックされたら関数disp()を実行

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


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

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

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

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

</SCRIPT>
</HEAD>
<body bgcolor="#aaccff" text="#000000" background="1.jpg">
<center>
<form name="msa" method="post">
<input size=40 name="ea" type="text"><br>
<input size=40 name="eb" type="text">
</form>
<br><br>
<SCRIPT LANGUAGE="JavaScript">
window.document.onmousedown = disp;
window.document.onmouseup = disp;
window.document.onclick = disp1;
window.document.onmousemove = disp2;
window.document.onkeydown = disp2;
window.document.onkeyup = disp2;
</SCRIPT>
</center>
</BODY>
</HTML>

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

2)　キーイベント

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

<HTML>
<HEAD>
<TITLE>Key Event</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function disp()
{
  document.forms[0].elements[0].value=event.type ;
  document.forms[0].elements[1].value=event.keyCode ;
  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">
window.document.onkeydown = disp;
window.document.onkeyup = disp;
</SCRIPT>
</center>
</BODY>
</HTML>

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

3)　マウスイベント

window.event.screenX window.event.screenY	イベントが発生した場所のスクリーン上の座標
window.event.clientX window.event.clientY	イベントが発生した場所のクライアント領域（ウィンドウ）上の座標
window.event.x window.event.y	イベントが発生した場所の配置された親要素（通常は BODY 要素）上の座標
window.event.offsetX window.event.offsetY	クリックした要素上の座標
window.event.button	クリックしたボタン（左：１／右：２／中央：４の合計）

<HTML>
<HEAD>
<TITLE>Mouse Event</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function disp()
{
  document.msa.sx.value=window.event.screenX ;
  document.msa.sy.value=window.event.screenY ;
  document.msa.wx.value=window.event.clientX ;
  document.msa.wy.value=window.event.clientY ;
  document.msa.bx.value=window.event.x ;
  document.msa.by.value=window.event.y ;
  document.msa.ox.value=window.event.offsetX ;
  document.msa.oy.value=window.event.offsetY ;
  document.msa.bt.value=window.event.button ;
}
</SCRIPT>
</HEAD>
<body bgcolor="#aaccff" text="#000000" background="3.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=5 name="sx" type="text" value="">
Y<input size=5 name="sy" type="text" value="">
</td></tr>
<tr>
<td align=left><font color=ffffff size=4>WINDOW:</font></td>
<td align=left>
X<input size=5 name="wx" type="text" value="">
Y<input size=5 name="wy" type="text" value="">
</td></tr>
<tr>
<td align=left><font color=ffffff size=4>BODY:</font></td>
<td align=left>
X<input size=5 name="bx" type="text" value="">
Y<input size=5 name="by" type="text" value="">
</td></tr>
<tr>
<td align=left><font color=ffffff size=4>OBJECT:</font></td>
<td align=left>
X<input size=5 name="ox" type="text" value="">
Y<input size=5 name="oy" type="text" value="">
</td></tr>
<tr>
<td align=left><font color=ffffff size=4>ボタン:</font></td>
<td align=center>
<input size=5 name="bt" type="text" value="">
</td></tr>
</table>
</form>
<br><br>
<center>
<img src="rena.jpg">
</center>
<SCRIPT LANGUAGE="JavaScript">
window.document.onmousedown = disp;
window.document.onmouseup = disp;
window.document.onclick = disp;
window.document.onmousemove = disp;
</SCRIPT>
</center>
</BODY>
</HTML>

下の「実行」をクリックして新しいウィンドウを開いてください。
ウィンドウは、背景だけが異なる左右２つのフレームで構成されます。
開いたウィンドウで、マウスを移動させて表示される座標の違いをみる。
[OBJECT]は、文字・画像・フォーム・その他で個別の値です。
開いたウィンドウ全体を移動させて、マウス移動で表示される座標をみる。
マウスボタンを単独・複数同時にクリックしてみる。

☆ イベントオブジェクト(Internet Explorer)

［書式］ window.event.イベント

☆　イベントオブジェクト(Internet Explorer)

［書式］　window.event.イベント