快捷導(dǎo)航

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