Javascript拖拽&拖放系列文章3之细说事件对象第2/4页
String类型，在IE中可读可写，而在兼容DOM事件模型的浏览器中为只读属性。
例如，你可以使用如下代码在任何浏览器中获取事件的类型：
var e=e||window.event;
var sEventType=e.type;
如果是IE浏览器，e的类型就是“undefined”，从而将window.Event对象赋给变量e，对于其他的浏览器，结果正好相反。
既然说到了事件的类型，那我们就讨论一下mouseout和mouseover这两个事件了吧，从而为后面将会讲到的fromElement和toElement属性作铺垫。
mouseout事件表示，当鼠标指针在目标元素内，且当指针正要被移出目标元素的边界（也就是CSS中的border属性）时发生。
好了，该是看看我们本文的第二个例子的时候了，紫色边框就是目标元素的边界，你可以将鼠标指针慢慢移向紫色边框，当靠近它时，便会弹出一个对话框。
示例代码2：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
border:1px solid black;
margin:0px;
}
#mouseoutElement{
width:188px;
height:188px;
border:1px solid purple;
margin-left:188px;
margin-top:188px;
}
</style>
<script type="text/javascript" language="JavaScript">
function moveout(e){
alert("The mouse pointer are moving out from me!!");
}
</script>
</head>
<body>
<div id="mouseoutElement">Please move out me!!</div>
<script type="text/javascript" language="JavaScript">
var source=document.getElementById("mouseoutElement");
source.onmouseout=moveout;
</script>
</body>
</html>
图二：当将鼠标指针移向边界时，弹出了一个对话框
如果你问为什么包含getElementById的代码块要放在Body元素的末尾，那是因为只有这时候Body元素以及其子元素才初始化完成，getElementById才能够取到值，否则就会发生错误。当然，你也可以将代码块封装到Body元素的load事件处理函数当中，效果其实是一样的。
但是mouseout事件在WebKit内核浏览器（Safari、Chrome）的实现当中存在Bug，如果事件处理程序中包括alert函数，就会连续运行两次，所以它会连续弹出两个相同的对话框。这个Bug我也不知道该如何解决，如果有高手知道的话，麻烦你请告诉我。
用下面的代码在Safari（Chrome）中测试我们可以看到，如果在mouseout Handler中没有alert函数，一切就都正常了。但是mouseout事件在WebKit内核浏览器（Safari、Chrome）的实现当中存在Bug，因为它会连续弹出两个相同的对话框。这个Bug我也不知道该如何解决，如果有高手知道的话，麻烦你请告诉我。
注：感谢alertabc提供了下面的测试代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>onmouseout</title>
</head>
<body>
<div onmouseout="out();" style=" background-color:Yellow; width:400px; height:250px;"></div>
<div id="result"></div>
</body>
<script type="text/javascript">
function out(){
document.getElementById("result").innerHTML += "onmouseout ";
//alert("h");
}
</script>
</html>
Any help would be greatly appreciated，thanks in anticipation.
I often think that，if all web explorers were to have the same kernel engines，that would be wonderful！
mouseover事件正好和mouseout事件相反，是指当鼠标指针移出某个元素，移动到目标元素的边界（也就是它的border）时发生。
好了再让我们看一个示例代码吧，这个例子和上面的那个类此，因此不再赘述，你可以自己试一下。
示例代码3：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
border:1px solid black;
margin:0px;
}
#mouseoverElement{
width:188px;
height:188px;
border:1px solid purple;
margin-left:188px;
margin-top:188px;
}
</style>
<script type="text/javascript" language="JavaScript">
function moveover(e){
alert("The mouse pointer are moving into me!!");
}
</script>
</head>
<body>
<div id="mouseoverElement">Please move into me!!</div>
<script type="text/javascript" language="JavaScript">
var source=document.getElementById("mouseoverElement");
source.onmouseover=moveover;
</script>
</body>
</html>
WebKit内核浏览器对于mouseout的Bug在mouseover中并不存在。
3.1.2 IE事件模型和DOM事件模型不同的属性/方法
接下来，讨论一下它们之间的区别（只是名字不一样罢了）。
1 IE中的srcElement属性和DOM中的target属性
srcElement和target属性的返回类型都是Element，表示触发事件的元素。例如，
document.body.onmouseover=function(){
if(arguments[0])
{
alert(arguments[0].target.tagName);
}
else
{
alert(window.event.srcElement.tagName);
}
};
这样就可以获得触发了事件的元素了。arguments集合表示方法中的实参集合，在上面的代码段中，arguments[0]如果不为空，就证明是DOM事件模型的浏览器（因为会传递e事件对象），反之，则为IE浏览器。这不难理解。
2 IE中的fromElement、toElement属性和DOM中的relatedTarget属性
这三个属性的返回类型都是Element，在mouseover和mouseout两个鼠标事件中使用。DOM中的relatedTarget相当于IE中的fromElement和toElement属性。当在mouseover事件处理程序当中，relatedTargent属性返回一个元素的引用，表示鼠标指针来自的那个元素。而在mouseout中，relatedTarge属性指出鼠标指针将要去往的，并且是紧靠着当前元素的元素。
注：在mouseout事件中，DOM的target总是等于relatedTarget属性，表示将要去往的元素，如果想要得到触发mouseout事件的当前元素，请使用DOM的currentTarget属性。
在IE中，DOM的relatedTarget被分成了两个属性。对于mouseover事件，fromElement属性表示鼠标指针所离开的，并且是紧靠着当前元素的元素。toElement总是等于srcElement属性。而对于mouseout事件，toElement属性表示鼠标指针将要去往的，并且是紧靠着当前元素的元素。fromElement总是等于srcElement属性。如果有些乱的话，我们不妨看一个例子，你运行一下，就都明白了。
示例代码4：
HTML代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
border:1px solid black;
margin:0px;
height:288px;
}
#mouseoverElement{
width:188px;
height:188px;
border:1px solid purple;
margin:38px 0 0 188px;
}
</style>
<script type="text/javascript" language="JavaScript">
function moveover(e){
alert("The mouse pointer are moving into me!!");
}
</script>
</head>
<body>
<div id="mouseoverElement">Please move into me!!</div>
<script type="text/javascript" language="JavaScript">
var source=document.getElementById("mouseoverElement");
source.onmouseover=function(){
if(arguments[0])
{
alert("The event of mouseover started.");
alert("The element of trigering event is "+arguments[0].target.tagName);
alert("relatedTarget:"+arguments[0].relatedTarget.tagName);
alert("The event of mouseover finished.");
}
else
{
alert("The event of mouseover started.");
alert("The element of trigering event is "+window.event.srcElement.tagName);
alert("fromElement: "+window.event.fromElement.tagName);
alert("toElement: "+window.event.toElement.tagName);
alert("The event of mouseover finished.");
}
};
source.onmouseout=function(){
if(arguments[0])
{
alert("The event of mouseout started.");
alert("The element of trigering event is "+arguments[0].currentTarget.tagName);
alert("relatedTarget:"+arguments[0].relatedTarget.tagName);
alert("The event of mouseout finished.");
}
else
{
alert("The event of mouseout started.");
alert("The element of trigering event is "+window.event.srcElement.tagName);
alert("toElement: "+window.event.toElement.tagName);
alert("fromElement: "+window.event.fromElement.tagName);
alert("The event of mouseover finished.");
}
};
");
}
};
</script>
</body>
</html>
最新评论