JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件

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

时间: 2012-08-11

JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js

检测浏览器的方式 1.对象特征检测法:判断浏览器能力的通用方法.如果更关注浏览器的能力而不在乎它的实际身份,就可以使用这种检测方法.常见的原生Ajax写法中就用这种方法来创建XMLHttpRequest: 复制代码 代码如下: IXHR: function(){ if(window.ActiveXObject){ XHR=new ActiveXObject('Microsoft.XMLHTTP'); }else if(window.XMLHttpRequest){ XHR=new XMLHttp

JavaScript高级程序设计 阅读笔记(十二) js内置对象Math

Math对象的属性 E:值e,自然对数的底 LN10:10的自然对数 LN2:2的自然对数 LOG2E:以2为底E的对数 LOG10E:以10为底E的对数 PI:值派 SQRT1_2:1/2 的平方根 SQRT2:2的平方根 Math对象的方法:最大值与最小值 min()&&max()用于取一组数中的最小值跟最大值. 示例: 复制代码 代码如下: var iMax=Math.Max(1,2,3); alert(iMax);//outputs 3 var iMin=Math.Min(1,2,

JavaScript高级程序设计 阅读笔记(二十) js错误处理

一.错误分类 1.语法错误:也称解析错误,发生在传统语言的编译时,在JavaScript中发生在解释时.这些错误是由代码中的意外字符直接引起的,然后就不能直接编译/解释.发生语法错误时,就不能继续执行代码.在JavaScript中,只有在同一个线程中的代码会受语法错误的影响.在其他线程中的代码和其他外部引用的文件中的代码,如果不依赖于包含错误的代码,则可以继续执行. 2.运行时错误:也称为异常(exception,在编译期/解释器后).此时,问题并不出在代码的语法上,而是,尝试完成的一个操作,在

JavaScript高级程序设计 读书笔记之九 本地对象Array

创建Array对象 复制代码 代码如下: //one var aValues=new Array(); //two var aValues=new Array(20); //three var aColors=new Array(); aColors[0]="red"; aColors[1]="green"; aColors[2]="blue"; //four var aColors=new Array("red","

JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)

2.9 运算符 2.9.1.一元运算符 一元运算符只有一个参数,即要操作的对象或值. 1.delete:删除对以前定义的对象属性或方法的引用,但此运算符不能删除开发者未定义的属性和方法.示例: 复制代码 代码如下: var o=new Object; o.name="Nicholas"; o.show=function(){ return "test"; }; console.log(o.name); //outpus Nicholas console.log(o.

《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础

2.1 语法 区分大小写.变量弱类型.行尾分号可有可无.注释为双斜线.括号表明代码块 2.2 变量 变量用var声明,变量的命名规则:第一个字符必须是字母.下划线或美元符号:余下的字符可以是下划线.美元符号或任何字母或数字字符. 变量命名规范: Camel标记法:首字母小写,接下来的单词都以大写字母开头.例如:var myTestValue=0,mySecondTestValue="hi"; Pascal标记法:首字母大写,接下来的单词都以大写字母开头.例如:var MyTestVal

JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换

2.7 类型转换 1.转换成字符串 所有对象都有toString()方法可以转换成字符串,要注意的是Number类型的toString()方法,它有两种模式,即默认模式和基模式,采用默认模式toString()方法只是用相应的字符串输出对应的10进制数字值,用基模式可以用不同的基输出数字.示例: 复制代码 代码如下: var iNum1=10; var iNum2=10.0; var iNum3=10; alert(iNum1.toString()); //outpus "10" al

《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型

2.6 原始类型 ECMAScript有5种原始类型(primitive type),即Undefined.Null.Boolean.Number和String.ECMAScript提供了typeof来判断值的类型. 1.typeof运算符: 复制代码 代码如下: var sTemp="test string"; alert(typeof sTemp);//outpus "string" alert(typeof 95);//outpus "number&

JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML

一.IE中的XML DOM支持 IE对XML的支持是基于ActiveX的MSXML库. 1.DOM创建 对每个新版本的MSXML,都会创建出不同的XML DOM对象,所以尽量选择新的XML DOM版本. 2.载入XML 载入XML分两种,即: 载入XML字符串:loadXML(xml字符串) 载入xml文件:load(xml文件路径).默认情况下文件载入是异步的,如果要改为同步把asynce特性改为true即可.异步载入文件时要用到readyState和onreadystatechange事件处

《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型

2.8 引用类型 1.Object类 ECMAScript中的所有类都是由Object类继承而来. Object类具有下列属性: Constructor:对创建对象的函数的引用(指针),对于Object类,该指针指向原始的Object()函数 Prototype:对该对象的对象原型的引用. Object类还有几个方法: HasOwnProperty(property):判断对象是否有某个特定的属性.必须用字符串指定该属性值 IsPrototypeOf(object):判断该对象是否为另一个对象的

JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现

继承 继承是面向对象语言的必备特征,即一个类能够重用另一个类的方法和属性.在JavaScript中继承方式的实现方式主要有以下五种:对象冒充.call().apply().原型链.混合方式. 下面分别介绍. 对象冒充 原理:构造函数使用this关键字给所有属性和方法赋值.因为构造函数只是一个函数,所以可以使ClassA的构造函数成为ClassB的方法,然后调用它.ClassB就会收到ClassA的构造函数中定义的属性和方法. 示例: 复制代码 代码如下: function ClassA(sCol

JavaScript高级程序设计 阅读笔记(十七) js事件

一.事件流 IE中是冒泡型事件,即从最特定的事件目标到最不特定的事件目标. Netscape Navigator使用的是捕获型事件,这个跟IE中采用的冒泡型事件相反. DOM事件流同时支持两种事件模型,但捕获型事件先发生. 二.事件处理函数/监听函数 事件是用户或浏览器自身进行的特定行为.这些事件都有自己的名字,如click.load.mouseover等. 事件处理函数有两种分配方式:在JavaScript中或者在HTML中. 如果在JavaScript中分配事件处理函数,则首先要获得要处理的

JavaScript高级程序设计 阅读笔记(十五) 浏览器中的JavaScript

Window对象 窗口操作 Window对象对操作浏览器窗口非常有用,开发者可以移动或调整浏览器窗口的大小.可用四种方法实现这些操作: moveBy(dx,dy):把浏览器窗口相对当前位置水平移动dx个像素,垂直移动dy个像素.dx值为负左移,dy为负上移. moveTo(x,y):移动浏览器窗口,使它的左上角位于用户屏幕的(x,y)处.可以使用负数,不过这样会把部分窗口移出屏幕的可视区域. resizeBy(dw,dh):相对浏览器窗口当前大小,把窗口的宽度调整dw个像素,高度调整dy个像素.

JavaScript高级程序设计 阅读笔记(十三) js定义类或对象

工厂方式 创建并返回特定类型的对象. 复制代码 代码如下: function createCar(sColor,iDoors,iMpg){ var oTempCar=new Object(); oTempCar.color=sColor; oTempCar.doors=iDoors; oTempCar.mpg=iMpg; oTempCar.showColor=function(){ alert(this.color); } return oTempCar; } 调用示例: 复制代码 代码如下:

JavaScript高级程序设计 读书笔记之十 本地对象Date日期

创建 var d=new Date(); 要注意的是在JavaScript中月份的值是从0到11(0表示1月). 设置日期和时间值 设置日期和时间值有两种方法: 1.只声明距离1970年1月1日凌晨12点的毫秒数 a.直接用距离1970年1月1日凌晨12点的毫秒数 var d=new Date(0); b.parse方法: parse方法接受字符串为参数,把该字符串转换成日期值,返回的是毫秒数. 例如为2012年2月27日创建Date对象: var d=new Date(Date.parse("

JavaScript高级程序设计 读书笔记之八 Function类及闭包

Function类 定义 Function类可以表示开发者定义的任何函数,用Function类直接创建函数的语法如下: var function_name=new Function(agrument1,agrument2,...,argumentN,function_body); 每个argument都是一个参数,最后一个参数是函数主体(要执行的代码). 示例: 复制代码 代码如下: function sayHi(sName,sMessage){ alert("Hello "+sNam

JavaScript高级程序设计 阅读笔记(十九) js表格排序

排序代码 复制代码 代码如下: function SortTable(sTableID, iCol, sDataType){ this.oTable=document.getElementById(sTableID); this.oTBody=this.oTable.tBodies[0]; this.colDataRows=this.oTBody.rows; this.aTRs=[]; this.iCol=iCol; this.sDataType=sDataType; } SortTable.p

JavaScript高级程序设计 读书笔记之十一 内置对象Global

内置对象 定义:由ECMAScript实现提供的.独立于宿主环境的所有对象,在ECMAScript程序开始执行时出现. 由定义可知开发者不必明确实例化内置对象,它已被实例化了.在ECMAScript-262只定义了两个内置对象,即Global和Math Global Global对象是ECMAScript中最特别的对象,因为实际上它根本不存在. 由于在ECMAScript中不存在独立的对象,所有函数都必须是某个对象的方法,如前面提到的isNaN().isFinite().parseInt()和p

JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句

if语句 语法: 复制代码 代码如下: if(condition){ statement1; } else{ statement2; } 迭代语句 1.do-while语句 语法: 复制代码 代码如下: do{ statement }while(expression); 2.while语句 语法: 复制代码 代码如下: while(expression){ statement } 3.for语句 语法: 复制代码 代码如下: for(initialization;expression;post-

JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)

2.9.5.加性运算符 加性运算符(即加号和减号)通常是最简单的运算符,不过在ECMAScript中,每个加性运算符都有大量的特殊行为. 1.加法运算符: 复制代码 代码如下: var iResult=1+2; console.log(iResult);//outputs 3 特殊性: 某个运算数是NaN,结果为NaN Infinity加Infinity,结果为Infinity -Infinity加-Infinity,结果为-Infinity Infinity加-Infinity,结果为NaN