《JavaScript高級程序設計》閱讀筆記（十八）：跨平臺的事件

跨平臺的事件EventUtil對象

　　EventUtil:

var 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;
        }
    },
    removeEventHandler:function(oTarget, sEventType, fnHandler){
        if(oTarget.removeEventListener){
            oTarget.removeEventListener(sEventType,fnHandler);
        } else if(oTarget.detachEvent){
            oTarget.detachEvent("on"+sEventType,fnHandler);
        } else{
            oTarget["on"+sEventType]=null;
        }
    },
    formatEvent:function(oEvent){
        var isIE=/msie/i.test(navigator.userAgent),
            isWin=/win/i.test(navigator.userAgent);
        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.relateTarget=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;
    },
    getEvent:function(){
        if(window.event){
            return this.formatEvent(window.event);
        }else{
            return EventUtil.getEvent.caller.arguments[0];
        }
    }
}

測試

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <meta charset="utf-8"/>
    <script>
        var 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;
                }
            },
            removeEventHandler:function(oTarget, sEventType, fnHandler){
                if(oTarget.removeEventListener){
                    oTarget.removeEventListener(sEventType,fnHandler);
                } else if(oTarget.detachEvent){
                    oTarget.detachEvent("on"+sEventType,fnHandler);
                } else{
                    oTarget["on"+sEventType]=null;
                }
            },
            formatEvent:function(oEvent){
                var isIE=/msie/i.test(navigator.userAgent),
                    isWin=/win/i.test(navigator.userAgent);
                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.relateTarget=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;
            },
            getEvent:function(){
                if(window.event){
                    return this.formatEvent(window.event);
                }else{
                    return EventUtil.getEvent.caller.arguments[0];
                }
            }
        }


        EventUtil.addEventHandler(window,"load",function(){
            var oDiv=document.getElementById("div1");

            EventUtil.addEventHandler(oDiv,"mouseover",handleEvent);
            EventUtil.addEventHandler(oDiv,"mouseout",handleEvent);
            EventUtil.addEventHandler(oDiv,"mousedown",handleEvent);
            EventUtil.addEventHandler(oDiv,"mouseup",handleEvent);
            EventUtil.addEventHandler(oDiv,"click",handleEvent);
            EventUtil.addEventHandler(oDiv,"dblclick",handleEvent);
        });

        function handleEvent(){
            var oEvent=EventUtil.getEvent();
            var oTextbox=document.getElementById("txt1");
            oTextbox.value+="\n>"+oEvent.type;
            oTextbox.value+="\n    target is "+oEvent.target.tagName;
            if(oEvent.relatedTarget){
                oTextbox.value+="\n    relateTarget is "+oEvent.relatedTarget.tagName;
            }
        }
    </script>
</head>
<body>
    <p>Use your mouse to click and double click the red square.</p>
    <div id="div1" style="width:100px;height:100px;background:red;">Test</div>
    <p><textarea id="txt1" rows="15" cols="50"></textarea></p>
</body>
</html>

Use your mouse to click and double click the red square.

Test

posted @ 2012-07-21 09:52 artwl 閱讀(704) 評論(0) 收藏舉報

刷新頁面返回頂部

個人簡介

var ME = {
	"name": "土豆/Artwl",
	"job": "coding",
	"languages": [
		"JS", "HTML",
                "CSS", "jQuery"
		"MVC",".NET",
		"設計模式"
	],
	"hobby": [
		"閱讀", "旅游",
		"音樂", "電影"
	]
}

TOP

《JavaScript高級程序設計》閱讀筆記（十八）：跨平臺的事件

跨平臺的事件EventUtil對象

測試

公告

個人簡介