《JavaScript高级程序设计》阅读笔记(十八):跨平台的事件-阿里云开发者社区

开发者社区> 技术mix呢> 正文

《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
 

本文转自Artwl博客园博客,原文链接:http://www.cnblogs.com/artwl/,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
BAT华为等一线大厂Java工程师必读书单(四)
BAT华为等一线大厂Java工程师必读书单(四)
8 0
JAVA转为wasm
JAVA转为wasm
5 0
JAVA转为wasm/JavaScript,可以考虑CheerpJ
JAVA转为wasm/JavaScript,可以考虑CheerpJ
6 0
MYSQL 中 LIMIT 用法
MYSQL 中 LIMIT 用法
3 0
使用Java 操作MinIO
今天我们使用JAVA来操作一下MinIO。
6 0
大学毕业年的找工作和学习总结
大学毕业年的找工作和学习总结
5 0
使用Java 操作MinIO
今天我们使用JAVA来操作一下MinIO。
4 0
FreeSwitch的Canvas功能
FreeSwitch的Canvas功能
3 0
CheerpJ相当于一个容器,效果类似Applet
CheerpJ相当于一个容器,效果类似Applet
4 0
+关注
2969
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载