JavaScript高级程序设计 阅读笔记（十八） js跨平台的事件
发布时间：2024-04-10 11:01:56
标签：跨平台
跨平台的事件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>
// 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];
}
}
}
window.onload=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.innerHTML+="
>"+oEvent.type;
oTextbox.innerHTML+="
target is "+oEvent.target.tagName;
if(oEvent.relatedTarget){
oTextbox.innerHTML+="
relateTarget is "+oEvent.relatedTarget.tagName;
}
}
// ]]>
Use your mouse to click and double click the red square.
Test
作者：Artwl
出处：http://artwl.cnblogs.com
0
投稿猜你喜欢
- JavaScript中的typeof其实非常复杂,它可以用来做很多事情,但同时也有很多怪异的表现.本文列举出了它的多个用法,而且还指出了存在
对于相册来说，大图的浏览非常重要，因为对浏览者来说最重要的就是大图看得爽不爽，因为做项目的需要，我比较了许多相册的大图浏览方式，现在一一评说- 前言大家好，我是空空star，本篇给大家分享一下通过Python的pytesseract库识别图片中的文字。本篇所用软件相关版本：macOS
- 前言在日常开发编程中，我们有时从用户那里得到一些输入信息，对于特定应用，部分信息不允许包含中文字符，那如何检测信息字符串中是否包含中文字符呢
- sql调优的几种方式：避免使用select *、用union all 代替union、小表驱动大表、批量操作、多用limit、in中值太多、
- 下面给大家介绍js中apply和Math.max()函数的问题，具体内容如下所示：var arr=[1,3,6,3,7,9,2];conso
- 用程序来处理图像和办公文档经常出现在实际开发中，Python的标准库中虽然没有直接支持这些操作的模块，但我们可以通过Python生态圈中的第
- 这篇文章主要介绍了基于Python获取照片的GPS位置信息,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要
- 通过上篇文章给大家介绍了SqlServer应用之sys.dm_os_waiting_tasks 引发的疑问(上) ，说了一下sys.dm_e
- MySQL扩展库操作MySQL数据库的步骤如下：1：获取连接.2：选取书库。3：设置操作编码。4：发送SQL指令（MySQL数据库可以分为四
- 列表生成式基础语法[exp for iter_var in iterable (if conditional)]原理:首先迭代 iterab
- python关系图的可视化主要就是用来分析一堆数据中，每一条数据的节点之间的连接关系从而更好的分析出人物或其他场景中存在的关联关系。这里使用
- js对文字进行编码涉及3个函数：escape,encodeURI,encodeURIComponent，相应3个解码函数：unescape,
- 创建表&创建索引create table tbl1 (id int unique, sname varchar(50),index
- Python命令启动Web服务器实例详解利用Python自带的包可以建立简单的web服务器。在DOS里cd到准备做服务器根目录的路径下，输入
- 1.批量处理所谓的批处理就是批量处理cmd里面的命令。python要想实现批处理功能需要导入os库，然后利用批处理的命令为os.system
- 简介Tornado龙卷风是一个开源的网络服务器框架，它是基于社交聚合网站FriendFeed的实时信息服务开发而来的。2007年由4名Goo
- nii.gz格式是医学图像常用的压缩格式，python中可用nibabel和sitk来读取保存。使用nibabel由于使用nibabel图像
- 目录前言1、背景2、模拟测试3、结论总结前言如果不是踩到坑，我估计到现在还不知道时间字段会四舍五入。1、背景通过 Java 代码获取当日最大
- NumPy数组（2、数组的操作）基本运算数组的算术运算是按元素逐个运算。数组运算后将创建包含运算结果的新数组。>>> a=
