脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Javascript拖拽

Javascript拖拽&拖放系列文章3之细说事件对象第4/4页

 更新时间：2008年09月25日 16:15:15   作者：  
Javascript中的事件对象其实和.NET中继承自EventArgs类的派生类类似，用来给事件处理程序传递状态信息，从而进行相应的操作。这一篇文章将讲述Javascript事件对象中和实现拖拽功能相关的几个属性，并在最后将IE事件模型和标准DOM事件模型的差异封装到一个类中，从而适应所有的浏览器。

3.2 将IE事件模型和DOM事件模型的差异封装起来

注：本来打算采用《Javascript高级程序设计》这本书中所叙述的方法来封装差异，读过的人知道，作者是用return EventUtil.getEvent.caller.Arguments[0]来获得原始的事件对象的，这的确很棒，很巧妙，已经很完美了，我没有必要在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属性

这两个属性分别表示鼠标指针相对于整张网页(取决于body元素的实际边界范围)的x、y坐标，单位是像素。在构造它们之前，需要了解另外两个属性document.Body.scrollLeft和document.body.scorllTop，单位是像素，当浏览器出现滚动条且滚动页面时，数值分别等同于页面在水平、垂直方向上滚动的距离，否则为0像素。

我想你已经想到了该如何构造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代码：

 


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);
    };

啊，冗长的一篇文章被我写完了，我终于可以休息一下了........希望能给一些人帮助，哪怕是一点点，也会是我继续写下去的动力........

至于下一篇写什么？卖个关子先。

To be continued........

上一页1234阅读全文
您可能感兴趣的文章:

相关文章

最新评论