跨浏览器的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];
    }
}

转载于:https://www.cnblogs.com/simply-zhao/archive/2008/01/03/1025182.html