Javascript拖拽&拖放系列文章3之細(xì)說事件對象第3/4頁
3.2 將IE事件模型和DOM事件模型的差異封裝起來
注：本來打算采用《Javascript高級程序設(shè)計(jì)》這本書中所敘述的方法來封裝差異，讀過的人知道，作者是用return EventUtil.getEvent.caller.Arguments[0]來獲得原始的事件對象的，這的確很棒，很巧妙，已經(jīng)很完美了，我沒有必要在re-invent the wheel了，只可惜Opera瀏覽器不支持caller屬性，為了瀏覽器兼容性，所以我不得不采用自己的方法了。caller的詳細(xì)內(nèi)容可以參考《全面理解JavaScript中的caller，callee，call，apply》 這篇文章。
3.2.1 定義框架
首先定義一個(gè)封裝的框架，再細(xì)細(xì)添枝加葉。
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 構(gòu)造DOM中的pageX和pageY屬性
這兩個(gè)屬性分別表示鼠標(biāo)指針相對于整張網(wǎng)頁(取決于body元素的實(shí)際邊界范圍)的x、y坐標(biāo)，單位是像素。在構(gòu)造它們之前，需要了解另外兩個(gè)屬性document.Body.scrollLeft和document.body.scorllTop，單位是像素，當(dāng)瀏覽器出現(xiàn)滾動條且滾動頁面時(shí)，數(shù)值分別等同于頁面在水平、垂直方向上滾動的距離，否則為0像素。
我想你已經(jīng)想到了該如何構(gòu)造pageX和pageY了。沒錯(cuò)，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 構(gòu)造DOM中的relatedTarget屬性
我們可以用事件對象的type屬性判斷鼠標(biāo)事件類型，從而決定何時(shí)將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 構(gòu)造DOM中的target/currentTarget屬性
終于快要結(jié)尾了......
只需要引用srcElement屬性就可以了，不過要注意，我們在前面說過，在mouseout事件中，DOM的target總是等于relatedTarget屬性，因此我們同樣要構(gòu)造currentTarget屬性，以免在調(diào)用currentTarget時(shí)返回“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);
};
啊，冗長的一篇文章被我寫完了，我終于可以休息一下了........希望能給一些人幫助，哪怕是一點(diǎn)點(diǎn)，也會是我繼續(xù)寫下去的動力........
至于下一篇寫什么？賣個(gè)關(guān)子先。
To be continued........
yle="COLOR: #0000ff"></script></body>
</html>
