An EventUtility Class for JavaScript

最新推荐文章于 2020-11-22 08:03:35 发布

原创最新推荐文章于 2020-11-22 08:03:35 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #class #function #firefox #object #date

本文介绍了一种跨浏览器的JavaScript事件处理方法，通过一个实用的EventUtil对象封装了不同浏览器下事件处理的差异，使得开发者可以使用统一的方式为元素绑定或解除事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*Learn English for Technology.
The soucrecode comes from Professional JavaScript for Web Developers writed by Nicholas C.Zakas
The summary writed by me for the new JavaScript learners.Glad to you can read it.Welcome to commnuctate web Dev Technology with me.
My blog is Http://blog.youkuaiyun.com/takeie.*/
/*The code shows Event in javascript*/

var EventUtil = new Object;//Initlialize a object by factory model.

//To attach a event by tow method.The addEventListener supporteb by the browers except ie and
//attachEvent just supported by ie
EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) {
    if (oTarget.addEventListener) {
        oTarget.addEventListener(sEventType, fnHandler, false);
    } else if (oTarget.attachEvent) {
        oTarget.attachEvent("on" + sEventType, fnHandler);
    } else {
        oTarget["on" + sEventType] = fnHandler;//All supported
    }
};

//To Remove a Event from a Object.The removeEventListener property soupported by
//firefox and the detachEvent just supported by ie
EventUtil.removeEventHandler = function (oTarget, sEventType, fnHandler) {
    if (oTarget.removeEventListener) {//firefox
        oTarget.removeEventListener(sEventType, fnHandler, false);
    } else if (oTarget.detachEvent) {//ie
        oTarget.detachEvent("on" + sEventType, fnHandler);
    } else {
        oTarget["on" + sEventType] = null;//Other Supported
    }
};

//to format a event object
EventUtil.formatEvent = function (oEvent) {
    if (isIE && isWin) {
        oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
        oEvent.eventPhase = 2;
        oEvent.isChar = (oEvent.charCode > 0);
        oEvent.pageX = oEvent.clientX + document.body.scrollLeft;
        oEvent.pageY = oEvent.clientY + document.body.scrollTop;
        oEvent.preventDefault = function () {
            this.returnValue = false;
        };

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

//Return a object who causes the event.
//window.event just supported  by ie.
//caller is a property to return the function's name which called himself.
EventUtil.getEvent = function() {
    if (window.event) {
        return this.formatEvent(window.event);
    } else {
        return EventUtil.getEvent.caller.arguments[0];
    }
};
//Now you can use this code to create the object event without thinking whick kind brower it is!
//Enjoy working at flying Studio