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

Javascript拖拽&拖放系列文章3之細說事件對象第2/4頁

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


String類型，在IE中可讀可寫，而在兼容DOM事件模型的瀏覽器中為只讀屬性。

例如，你可以使用如下代碼在任何瀏覽器中獲取事件的類型：

 

 var e=e||window.event;
 var sEventType=e.type;

如果是IE瀏覽器，e的類型就是“undefined”，從而將window.Event對象賦給變量e，對于其他的瀏覽器，結(jié)果正好相反。

既然說到了事件的類型，那我們就討論一下mouseout和mouseover這兩個事件了吧，從而為后面將會講到的fromElement和toElement屬性作鋪墊。

mouseout事件表示，當鼠標指針在目標元素內(nèi)，且當指針正要被移出目標元素的邊界（也就是CSS中的border屬性）時發(fā)生。

好了，該是看看我們本文的第二個例子的時候了，紫色邊框就是目標元素的邊界，你可以將鼠標指針慢慢移向紫色邊框，當靠近它時，便會彈出一個對話框。

示例代碼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才能夠取到值，否則就會發(fā)生錯誤。當然，你也可以將代碼塊封裝到Body元素的load事件處理函數(shù)當中，效果其實是一樣的。

但是mouseout事件在WebKit內(nèi)核瀏覽器（Safari、Chrome）的實現(xiàn)當中存在Bug，如果事件處理程序中包括alert函數(shù)，就會連續(xù)運行兩次，所以它會連續(xù)彈出兩個相同的對話框。這個Bug我也不知道該如何解決，如果有高手知道的話，麻煩你請告訴我。

用下面的代碼在Safari（Chrome）中測試我們可以看到，如果在mouseout  Handler中沒有alert函數(shù)，一切就都正常了。但是mouseout事件在WebKit內(nèi)核瀏覽器（Safari、Chrome）的實現(xiàn)當中存在Bug，因為它會連續(xù)彈出兩個相同的對話框。這個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）時發(fā)生。

好了再讓我們看一個示例代碼吧，這個例子和上面的那個類此，因此不再贅述，你可以自己試一下。

示例代碼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)核瀏覽器對于mouseout的Bug在mouseover中并不存在。

3.1.2 IE事件模型和DOM事件模型不同的屬性/方法

接下來，討論一下它們之間的區(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集合表示方法中的實參集合，在上面的代碼段中，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屬性，表示將要去往的元素，如果想要得到觸發(fā)mouseout事件的當前元素，請使用DOM的currentTarget屬性。

在IE中，DOM的relatedTarget被分成了兩個屬性。對于mouseover事件，fromElement屬性表示鼠標指針所離開的，并且是緊靠著當前元素的元素。toElement總是等于srcElement屬性。而對于mouseout事件，toElement屬性表示鼠標指針將要去往的，并且是緊靠著當前元素的元素。fromElement總是等于srcElement屬性。如果有些亂的話，我們不妨看一個例子，你運行一下，就都明白了。

示例代碼4：

 

HTML代碼

相關(guān)文章

最新評論