欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Javascript拖拽&拖放系列文章3之細(xì)說(shuō)事件對(duì)象第2/4頁(yè)

 更新時(shí)間:2008年09月25日 16:15:15   作者:  
Javascript中的事件對(duì)象其實(shí)和.NET中繼承自EventArgs類的派生類類似,用來(lái)給事件處理程序傳遞狀態(tài)信息,從而進(jìn)行相應(yīng)的操作。這一篇文章將講述Javascript事件對(duì)象中和實(shí)現(xiàn)拖拽功能相關(guān)的幾個(gè)屬性,并在最后將IE事件模型和標(biāo)準(zhǔn)DOM事件模型的差異封裝到一個(gè)類中,從而適應(yīng)所有的瀏覽器。


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代碼

相關(guān)文章

最新評(píng)論