イベントハンドラを外部ファイルに分離させた時のevent.target

質問

イベントハンドラを外部ファイルに分離させた時のevent.target||event.srcElementの挙動について質問です。お願いします。xhtmlの<div>に直接書いていたeventハンドラを外部に分離しました。

JavaScript
------------------------------
function Test() {
var n = document.getElementsByTagName('div')[0];

n.onmouseover = function() {
var m = event.target||event.srcElement;
var j = m.tagName;
alert(j);
}
}

$(function() {
Test();
});
------------------------------

xhtml
------------------------------
<div>
<p><img src="img01.png" width="300" height="300" /></p>
</div>
------------------------------

n.onmouseover後のfunction()ですが、FireFoxで動きません。
function()をfunction(event)にするとFireFoxで動くようになりますが、IEで動かなくなります。
FireFox、IE両方動くようにするにはどういう記述にしたらいいでしょうか？

回答No.1

yyr446 · ベストアンサー

こんなんでどうでしょう。↓（マウスオーバーとマウスアウトは同時に補足出来ます）

<script type="text/javascript">
<!--
$(function() {

if('undefined' !== typeof document.addEventListener){
　document.addEventListener('mousemove',listener,false);
}else if ('undefined' !== document.attachEvent){
　document.attachEvent('onmousemove',listener);
}
function listener(event){
　var target = event.target || event.srcElement;
　switch(event.type){
　 case "mousemove":
　var outtarget = event.relatedTarget || event.fromElement;
　　 if (target == document.getElementsByTagName('div')[0]){
　　　alert("マウスが入ったのは" + target.tagName);
　　　if(outtarget != null)
　　　 alert("マウスが出たのは" + outtarget.tagName);
　　 }
　 break;
　}
}

});
// -->
</script>

お礼

できました！ありがとうございます！

回答No.2

yyr446

No.1 訂正　'mousemove' でなく　'mouseover' でしたね。

それから、$(function(){ って、jQuery使ってるなら

$(function() {
　$("div:eq(0)").mouseover(function(){
alert($(this).get(0).tagName);
});
});

だけでしょう．．．