今天帮同学写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。这个有待与进一步研究