《JavaScript進階程式設計》閱讀筆記（十八）：跨平台的事件

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

跨平台的事件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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More