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

更新時間：2008年09月25日 16:15:15 作者：

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

3.2 將IE事件模型和DOM事件模型的差異封裝起來

注：本來打算采用《Javascript高級程序設計》這本書中所敘述的方法來封裝差異，讀過的人知道，作者是用return EventUtil.getEvent.caller.Arguments[0]來獲得原始的事件對象的，這的確很棒，很巧妙，已經(jīng)很完美了，我沒有必要在re-invent the wheel了，只可惜Opera瀏覽器不支持caller屬性，為了瀏覽器兼容性，所以我不得不采用自己的方法了。caller的詳細內容可以參考《全面理解JavaScript中的caller，callee，call，apply》這篇文章。

3.2.1 定義框架

首先定義一個封裝的框架，再細細添枝加葉。

var EventUtilization=new Object;
    EventUtilization.getCompatibleEvent=function(e){
    //判斷是否是IE瀏覽器
    if(!EventUtilization.getCompatibleEvent.arguments[0])
    {
      e=window.event;
      //使IE的window.event屬性和DOM的一樣
      //..
      return e;
    }
      return e;
    }

很簡單，就不再贅述了。

3.2.2 格式化window.Event對象

1 構造DOM中的pageX和pageY屬性

這兩個屬性分別表示鼠標指針相對于整張網(wǎng)頁(取決于body元素的實際邊界范圍)的x、y坐標，單位是像素。在構造它們之前，需要了解另外兩個屬性document.Body.scrollLeft和document.body.scorllTop，單位是像素，當瀏覽器出現(xiàn)滾動條且滾動頁面時，數(shù)值分別等同于頁面在水平、垂直方向上滾動的距離，否則為0像素。

我想你已經(jīng)想到了該如何構造pageX和pageY了。沒錯，pageX=clientX+scorllLeft，pageY=clientY+clientTop。

Javascript代碼片段：

    if(!EventUtilization.getCompatibleEvent.arguments[0])
    {
      e=window.event;
      e.pageX=e.clientX+document.body.scrollLeft;
      e.pageY=e.clientY+document.body.scrollTop;
      //..
    }

2 構造DOM中的relatedTarget屬性

我們可以用事件對象的type屬性判斷鼠標事件類型，從而決定何時將fromElement或toElement的值賦給relatedTarget屬性。

Javascript代碼片段：

    if(!EventUtilization.getCompatibleEvent.arguments[0])
    {
      e=window.event;
      //..
      if(e.type=="mouseout")
      {
        e.relatedTarget=e.toElement;
      }
      else if(e.type=="mouseover")
      {
        e.relatedTarget=e.fromElement;
      }
      //..
     }

3 構造DOM中的target/currentTarget屬性

終于快要結尾了......

只需要引用srcElement屬性就可以了，不過要注意，我們在前面說過，在mouseout事件中，DOM的target總是等于relatedTarget屬性，因此我們同樣要構造currentTarget屬性，以免在調用currentTarget時返回“undefined”。

    if(!EventUtilization.getCompatibleEvent.arguments[0])
    {
      e=window.event;
      //..
      e.target=e.srcElement;
      e.currentTarget=e.srcElement;
      //..
     }

完整的JS代碼：

JS代碼
var EventUtilization=new Object;
    EventUtilization.getCompatibleEvent=function(e){
    if(!EventUtilization.getCompatibleEvent.arguments[0])
    {
      e=window.event;
      e.pageX=e.clientX+document.body.scrollLeft;
      e.pageY=e.clientY+document.body.scrollTop;
      if(e.type=="mouseout")
      {
        e.relatedTarget=e.toElement;
      }
      else if(e.type=="mouseover")
      {
        e.relatedTarget=e.fromElement;
      }
      e.target=e.srcElement;
      e.currentTarget=e.srcElement;
      return e;
    }
      return e;
  }

它能夠完美的兼容Internet Explorer、Mozilla Firefox、Netscape、Sarari（Chrome）、Opera等瀏覽器的流行版本。

3.2.3 框架的使用

我將它命名為EventUtilization.js，將它放在頁面中后，就可以用如下的方法使用了：

  var source=document.getElementById("mouseoverElement");
    source.onmouseover=function(e){
      var e=EventUtilization.getCompatibleEvent(e);
      alert(e.pageX);
      alert(e.pageY);
      alert(e.relatedTarget.tagName);
      alert(e.target.tagName);
      alert(e.currentTarget.tagName);
    };