跨浏览器的JavaScript事件处理[JavaScript高级程序设计]

//document.write("<script type=\"text\/javascript\" src=\"myLibrary\/browserDetect.js\"><\/script>");

/*

* 跨浏览器的事件处理方式，以便所有的浏览器和特征检测都可以在后台完成

* 本Js代码的目的就是尽可能的弱化IE事件模型和DOM事件模型之间的区别，使一部分代码能在所有主流浏览器上几乎完全相同的运行

*/

/*

* 管理多个函数的容器，无任何属性

*/

var EventUtil = new Object;

/*

* 创建统一的分配事件处理函数和删除的方式

*/

EventUtil.addEventHandle = function(oTarget,sEventType,fnHandle)

{

//特征检测法

if(oTarget.addEventListener)

{

//DOM事件模型中添加冒泡阶段的事件监听函数

oTarget.addEventListener(sEventType,fnHandle,false);

}

else if(oTarget.attachEvent)

{

oTarget.attachEvent("on"+sEventType,fnHandle);

}

else

oTarget["on"+sEventType] = fnHandle;

}

EventUtil.removeEventHandle = function(oTarget,sEventType,fnHandle)

{

if(oTarget.removeEventListener)

{

//DOM事件模型中添加冒泡阶段的事件监听函数

oTarget.removeEventListener(sEventType,fnHandle,false);

}

else if(oTarget.detachEvent)

{

oTarget.detachEvent("on"+sEventType,fnHandle);

}

else

oTarget["on"+sEventType] = null;

}

/*

* 格式化event对象

* 一种对付IE和DOM中的event对象之间区别的最佳手段是，调整它们使之尽可能地表现相似

* 因为有更多的浏览器使用的是DOM事件模型，所以这里将IE的事件模型调整为接近DOM

*/

EventUtil.formatEvent = function(oEvent)

{

//这个函数的主要目的是修复只存在于Windows上的IE中的问题

if(isIE && isWin)

{

/*

* 用户按某个字符键的时候，会按如下顺序发生事件：

* 1.keydown

* 2.keypress

* 3.keyup

* 用户按某个非字符键（shift,ctrl,alt)的时候,会按如下顺序发生事件：

* 1.keydown

* 2.keyup

*/

oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;

oEvent.isChar = (oEvent.charCode>0);

/*

* DOM中才有eventPhase

* 0:捕获阶段

* 1:在目标上

* 2:冒泡阶段

*/

oEvent.eventPhase = 2;

oEvent.preventDefault = function()

{

this.returnValue = 0;

}

/*

* scrollLeft保存窗口在水平方向上卷动的距离

* scrollTop保存窗口在垂直方向上卷动的距离

*/

oEvent.pageX = oEvent.clientX + document.body.scrollLeft;

oEvent.pageY = oEvent.clientY + document.body.scrollTop;

if(oEvent.type == "mouseout")

{

oEvent.relatedTarget = oEvent.toElement;

}else if(oEvent.type == "mouseover")

{

oEvent.relatedTarget = oEvent.fromElement;

}

oEvent.stopPropagation = function()

{

this.cancelBubble = true;

}

oEvent.target = oEvent.srcElement;

oEvent.time = (new Date()).getTime();

}

return oEvent;

}

/*

* 获取事件对象

* IE中通过在事件处理函数中引用window.event获区事件对象

* DOM中则是通过事件监听函数的第一个参数 argument[0]

*/

/*

* 该方法可以在事件处理函数中使用：

* oDiv.onclick = function()

* {

* var oEvent = EventUtil.getEvent();

* };

*/

EventUtil.getEvent = function()

{

if(window.event)

{

return this.formatEvent(window.event);

}

else

{

/*

* 每个函数都有一个caller属性，它包含了指向调用它的方法的引用

* 例如，如果funcA()调用了funcB(),那么funcB.caller就等于funcA

*/

return EventUtil.getEvent.caller.arguments[0];

}

}