Javascript拖拽&拖放系列文章3之細(xì)說(shuō)事件對(duì)象第2/4頁(yè)
String類型,在IE中可讀可寫,而在兼容DOM事件模型的瀏覽器中為只讀屬性。
例如,你可以使用如下代碼在任何瀏覽器中獲取事件的類型:
var e=e||window.event;
var sEventType=e.type;
如果是IE瀏覽器,e的類型就是“undefined”,從而將window.Event對(duì)象賦給變量e,對(duì)于其他的瀏覽器,結(jié)果正好相反。
既然說(shuō)到了事件的類型,那我們就討論一下mouseout和mouseover這兩個(gè)事件了吧,從而為后面將會(huì)講到的fromElement和toElement屬性作鋪墊。
mouseout事件表示,當(dāng)鼠標(biāo)指針在目標(biāo)元素內(nèi),且當(dāng)指針正要被移出目標(biāo)元素的邊界(也就是CSS中的border屬性)時(shí)發(fā)生。
好了,該是看看我們本文的第二個(gè)例子的時(shí)候了,紫色邊框就是目標(biāo)元素的邊界,你可以將鼠標(biāo)指針慢慢移向紫色邊框,當(dāng)靠近它時(shí),便會(huì)彈出一個(gè)對(duì)話框。
示例代碼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>
圖二:當(dāng)將鼠標(biāo)指針移向邊界時(shí),彈出了一個(gè)對(duì)話框
如果你問(wèn)為什么包含getElementById的代碼塊要放在Body元素的末尾,那是因?yàn)橹挥羞@時(shí)候Body元素以及其子元素才初始化完成,getElementById才能夠取到值,否則就會(huì)發(fā)生錯(cuò)誤。當(dāng)然,你也可以將代碼塊封裝到Body元素的load事件處理函數(shù)當(dāng)中,效果其實(shí)是一樣的。
但是mouseout事件在WebKit內(nèi)核瀏覽器(Safari、Chrome)的實(shí)現(xiàn)當(dāng)中存在Bug,如果事件處理程序中包括alert函數(shù),就會(huì)連續(xù)運(yùn)行兩次,所以它會(huì)連續(xù)彈出兩個(gè)相同的對(duì)話框。這個(gè)Bug我也不知道該如何解決,如果有高手知道的話,麻煩你請(qǐng)告訴我。
用下面的代碼在Safari(Chrome)中測(cè)試我們可以看到,如果在mouseout Handler中沒(méi)有alert函數(shù),一切就都正常了。但是mouseout事件在WebKit內(nèi)核瀏覽器(Safari、Chrome)的實(shí)現(xiàn)當(dāng)中存在Bug,因?yàn)樗鼤?huì)連續(xù)彈出兩個(gè)相同的對(duì)話框。這個(gè)Bug我也不知道該如何解決,如果有高手知道的話,麻煩你請(qǐng)告訴我。
注:感謝alertabc提供了下面的測(cè)試代碼
<!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事件相反,是指當(dāng)鼠標(biāo)指針移出某個(gè)元素,移動(dòng)到目標(biāo)元素的邊界(也就是它的border)時(shí)發(fā)生。
好了再讓我們看一個(gè)示例代碼吧,這個(gè)例子和上面的那個(gè)類此,因此不再贅述,你可以自己試一下。
示例代碼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內(nèi)核瀏覽器對(duì)于mouseout的Bug在mouseover中并不存在。
3.1.2 IE事件模型和DOM事件模型不同的屬性/方法
接下來(lái),討論一下它們之間的區(qū)別(只是名字不一樣罷了)。
1 IE中的srcElement屬性和DOM中的target屬性
srcElement和target屬性的返回類型都是Element,表示觸發(fā)事件的元素。例如,
document.body.onmouseover=function(){
if(arguments[0])
{
alert(arguments[0].target.tagName);
}
else
{
alert(window.event.srcElement.tagName);
}
};
這樣就可以獲得觸發(fā)了事件的元素了。arguments集合表示方法中的實(shí)參集合,在上面的代碼段中,arguments[0]如果不為空,就證明是DOM事件模型的瀏覽器(因?yàn)闀?huì)傳遞e事件對(duì)象),反之,則為IE瀏覽器。這不難理解。
2 IE中的fromElement、toElement屬性和DOM中的relatedTarget屬性
這三個(gè)屬性的返回類型都是Element,在mouseover和mouseout兩個(gè)鼠標(biāo)事件中使用。DOM中的relatedTarget相當(dāng)于IE中的fromElement和toElement屬性。當(dāng)在mouseover事件處理程序當(dāng)中,relatedTargent屬性返回一個(gè)元素的引用,表示鼠標(biāo)指針來(lái)自的那個(gè)元素。而在mouseout中,relatedTarge屬性指出鼠標(biāo)指針將要去往的,并且是緊靠著當(dāng)前元素的元素。
注:在mouseout事件中,DOM的target總是等于relatedTarget屬性,表示將要去往的元素,如果想要得到觸發(fā)mouseout事件的當(dāng)前元素,請(qǐng)使用DOM的currentTarget屬性。
在IE中,DOM的relatedTarget被分成了兩個(gè)屬性。對(duì)于mouseover事件,fromElement屬性表示鼠標(biāo)指針?biāo)x開的,并且是緊靠著當(dāng)前元素的元素。toElement總是等于srcElement屬性。而對(duì)于mouseout事件,toElement屬性表示鼠標(biāo)指針將要去往的,并且是緊靠著當(dāng)前元素的元素。fromElement總是等于srcElement屬性。如果有些亂的話,我們不妨看一個(gè)例子,你運(yùn)行一下,就都明白了。
示例代碼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>