MouseMoveイベント時のeventオブジェクト情報

<p style="margin-left: 100px; background-color: yellow;" onmousemove="p1_mouseMove()">
このpタグにMouseMoveイベントが設定されています。
そして、この上をマウスが移動した時に実行するMouseMoveイベントの処理内で、 eventが持つ各種プロパティの情報を表示させています。
eventは、window.eventの略で、Internet Explorer、Operaブラウザで古くから使われました。(主要なブラウザのほとんどで使えるようですが、挙動が異なることがあります。)
ほとんどの場合、event.offsetX、event.offsetYを利用できれば用が足りると思われます。

← event.offsetX イベント発生要素内の座標
← event.offsetY
← event.clientX ブラウザ内のクライアント領域内の座標
← event.x
← event.clientY
← event.y
← event.pageX ページ内座標(スクロールで見えない領域を含む)
← event.pageY
← event.screenX スクリーン上のX座標
← event.screenY
← document.documentElement.scrollTop + document.body.scrollTop
← document.documentElement.scrollLeft
</p>

参考に上記 p の要素に記述したonmousemove="p1_mouseMove()" のp1_mouseMove関数の定義を以下に示します。

function p1_mouseMove(){
  var userAgent = window.navigator.userAgent.toLowerCase();
  if (userAgent.indexOf("firefox") > -1) {
      event = arguments.callee.caller.arguments[0];
  }
  document.frm1.txtOffsetX.value=event.offsetX;//イベント発生要素内の座標
  document.frm1.txtOffsetY.value=event.offsetY;
  document.frm1.txtClentX.value=event.clientX;//ブラウザ内のクライアント領域(フレームの内側での座標)
  document.frm1.txtX.value=event.x;
  document.frm1.txtClentY.value=event.clientY;
  document.frm1.txtY.value=event.y;
  document.frm1.txtPageX.value=event.pageX;// ページ内座標
  document.frm1.txtPageY.value=event.pageY;
  document.frm1.txtScreenX.value=event.screenX;//スクリーン上のX座標
  document.frm1.txtScreenY.value=event.screenY;
  document.frm1.txtscrollTop.value=document.documentElement.scrollTop + document.body.scrollTop;
  document.frm1.txtscrollLeft.value=document.documentElement.scrollLeft;
}

参考で、このMouseMoveイベントを使った、画像内の座標を確認する作品を ここに 紹介します。


なお、上記のように、IE(Operaも)のイベントモデルには、最後に生じたイベントをキャプチャーするwindow.eventという属性があり、 これはどこからでも自由にアクセスすることが出来ます。
対して、FireFoxでのイベントは、イベントハンドラーに引数として渡されるので、それを受け取るようにメソッドを作ります。 例えば、次のように作る方法です。


function p1_mouseMove(event){
	document.frm1.txtClentX.value=event.clientX;
}
document.getElementById("p1").onmousedown = p1_mouseMove;

また上記で使っている手法ですが、暗黙の引数を次のコードで取得して利用する方法もあります。
var event = arguments.callee.caller.arguments[0];

補足:IE9 IE10より上で示したeventの変数を使わず、 代わりイベント用メソッドの第1引数を使う手法が可能になっています。
その方が、FireFox、Google Chrome、Safari 、Opera などの主要ブラウザで統一的なプログラムが作りやすいようです。
その場合、Internet Explorer において、バージョンが 8 以前かを調べて対応する必要があります。 個人的には次のようなメソッドにして対応しています。このmaousemoveイベントは、下記ソースコード記述エリアに設定していまるので実験できます。
	function mouse_move_sub (itEvent){
		var ver = navigator.appVersion.toLowerCase();
		var ie_ver = "";
		if(ver.indexOf('msie') != -1){// IE ?
			ie_ver = parseInt(ver.replace(/.*msie[ ]/,'').match(/^[0-9]+/));//バージョン番号取得
			if(ie_ver <= 8) itEvent = event;	//IE8以前
		}//以上までが IE8対応処理

		var mx = itEvent.clientX;//ブラウザクライアント領域内x座標を得る
		var my = itEvent.clientY;//ブラウザクライアント領域内y座標を得る
		document.getElementById("verMsg")innerHTML=mx + "," + my + "の座標で" + ver + "のバージョン:" + ie_ver;
	}

直前で示したイベントの座標取得例は、スクロールに対応していません。
スクロールに対応した処理を以下に示します。(ここのコメントはIE10以前の手法です。)
mouse_event_proc=function (itEvent){
		/* getBoundingClientRectが使える前の手法
		var itX = this.offsetLeft;//左からの位置を得る。
		var mx = itEvent.clientX-itX;//相対座標を得る
		//(上記では、offsetXに相当する値であるがFireFoxが使えないので相当する情報を算術している)
		mx += document.documentElement.scrollLeft + document.body.scrollLeft;//ページがスクロールされている場合にも対応させる。
		var itY = this.offsetTop;//要素のページ上からの位置を得る。
		var my = itEvent.clientY-itY;
		my += document.documentElement.scrollTop + document.body.scrollTop;//ページがスクロールされている場合にも対応させる。
		*/
		var rect = イベントの発生element元.getBoundingClientRect ();
		mouseX=itEvent.clientX - rect.left;//element内のマウス位置x
		mouseY=itEvent.clientY - rect.top;//element内のマウス位置y
}

event.srcElement

onmousemoveなどに登録するイベント関数を定義する場合、イベント情報を取得するために、 引数を指定することができます。 その属性にある属性で、「srcElement」があります。 これはイベントが発生したオブジェクト(エレメント)を示します。 (Internet Explorer、Safari、Operaで動作します。)
function mousemove(e) {
            alert(e.srcElement.className);
}

タグ名はtagNameプロパティで取得することができ、上記はそれを確認する例です。