今天帮同学写javascript代码，模拟一个简单的弹出框，学了不少东西，具体代码如下：
<html>
<head>
<script language='javascript'>
function bodyLoad()
{
var tmpString = ""
var tmpDiv = document.getElementById("showDiv") ;
tmpDiv.style.position = "absolute" ;//必须设置为绝对位置，否则怎么设置位置都不管用
//设置div的绝对位置
tmpDiv.style.top = -200 ;
tmpDiv.style.left = -200 ;
}
function mouseover(event)
{
var event = window.event||event ;//这样可以解决firefox和ie的event差异
var toElement = (event.toElement||event.target) ;//不同浏览器的不同视角，下面有总结
showDiv(toElement);
}
function mouseout(event)
{
var event = window.event||event ;
var toElement = event.toElement||event.relatedTarget ;
//在javascript里最常用的取得页面元素的方法
var showDiv = document.getElementById("showDiv") ;
//在javascript里，取得元素还可以通过标签的方式，如document.getElementsByTagName
//这样的方式取得的不是一个元素，而是一个拥有同样标签的数组，从函数名中可以看的出来
if(toElement!=showDiv)
{
showDiv.style.top = - 200 ;
showDiv.style.left = - 200 ;
}
}
function showDiv(toElement)
{
var showDiv = document.getElementById("showDiv") ;
showDiv.style.top = toElement.offsetTop ;
showDiv.style.left = toElement.offsetLeft+toElement.offsetWidth ;
showDiv.innerHTML = "您指向了:"+toElement.innerHTML ;
}
function showObject(object)
{
var tmpString = "" ;
for(dd in object)
{
tmpString += dd ;
tmpString += " " ;
tmpString += object[dd] ;
tmpString += " " ;
}
alert(tmpString) ;
}
</script>
</head>
<body οnlοad="bodyLoad()">
<a id = "mylink" href="http://www.163.com" οnmοuseοver="mouseover(event)" οnmοuseοut="mouseout(event)">haha</a>
<br/>
<a id = "mylink" href="http://www.163.com" οnmοuseοver="mouseover(event)" οnmοuseοut="mouseout(event)">hehe</a>
<div id = "showDiv" οnmοuseοut="mouseout(event)">
<table border=1>
<tr>
<td><a href="http://www.sohu.com">aaaaa</a></td>
</tr>
<tr>
<td><a href="http://www.sina.com">bbbbb</a></td>
</tr>
<table>
</div>
</body>
</html>
今天可以说第一次真正亲身体验到了两种浏览器看待问题的不同。
首先对于event传递来说，ie浏览器的event对象是全局对象(window.event)，每当发生一个事件，就会更新这个对象，在代码中可以直接拿来就用(微软的东西不得不说很贴心啊)。在firefox浏览器中，靠的是参数的传递，需要在代码中明确写出传递event对象，更像java的程序代码。
其次对于event对象的属性来说也代表了两种不同的看待问题的方法。我这里用简简单单的一个事件来说明：鼠标从a身上移到了b身上。
对于ie的event来说，这个事件比较重要的两个属性是这样的:fromElement:a toElement b 很简单明了的表明了这个事件，鼠标从a对象来，到b对象去。是从全局的角度来看这个问题的。
在firefox浏览器来说，这个事件发生要涉及的对象有两个，a和b，在a和b的角度看来，这个事件完全是不一样的。
在a看来，发生了mouseout事件，在这个事件产生的event对象中，有两个属性，target：this，relatedTarget：b 这个很容易理解，在a看来，这个事件发生的对象是自己，发生了mouseout事件，鼠标从自己的范围内出去了，与这个事件有关的对象是b，毕竟是移动到了b去。
在b看来，发生了mouseover事件，在这个时间产生的event对象中，两个属性是这样的：target：this relatedTarget：a ； 这个也很容易理解，在b看来，这个时间发生的对象是自己，发生了mouseover事件，鼠标进入到了自己范围内，与这个事件有关系的对象是a，因为鼠标是从a的“管辖范围内” 进来的。
同一个简单的事件，不同的浏览器，不同的思维方式，不同的描述，一般情况下认为，ie的思维方式更容易理解，所以一般都会把事情转化到ie的方式进行处理，下面是转载的解决办法：
就event对象来说，可以专门写一个方法取得
function getEvent(){ //获取浏览器事件，同时兼容ie和ff的写法
if(document.all) return window.event;
func=getEvent.caller;
while(func!=null){
var arg0=func.arguments[0];
if(arg0){
if((arg0.constructor==Event || arg0.constructor ==MouseEvent)
|| (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){
return arg0;
}
}
func=func.caller;
}
return null;
}
就里面的属性不同，可以用一个包装方法，里面封装属性：
Event.prototype.__defineGetter__("fromElement",function(){// 返回鼠标移出的源节点
var node;
if(this.type=="mouseover")
node=this.relatedTarget;
else if(this.type=="mouseout")
node=this.target;
if(!node)return;
while(node.nodeType!=1)node=node.parentNode;
return node;
});
这里用了一个办法__defineGetter__来封装firefox里event的属性成为ie的属性，但是这里涉及到一个问题，在firefox下，event.prototype 不能用，只能是Event.prototype，但是在ie中，类Event.prototype不知道为什么也是不支持的，得到的结果居然是undefined。这个有待与进一步研究
3307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
