JavaScript让IE浏览器event对象符合W3C DOM标准

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<input id="butt" type="button" value="提交" />
</body>
<script type="text/javascript">
var EventUtil = {};
EventUtil.formatEvent = function(oEvent){
if(window.ActiveXObject){
//W3C event的charCode属性,按下的按键的Unicode值
oEvent.charCode = (oEvent.type == 'keypress') ? oEvent.keyCode : 0;
//W3C event的eventPhase属性
//事件的阶段,可能有以下的值中的一个:
// 0 - 捕获阶段
// 1 - 在目标上
// 2 - 冒泡阶段
oEvent.eventPhase = 2;
//W3C event的isChar属性,表示按下的按键是否有字符与之相关
oEvent.isChar = (EventUtil.charCode > 0);
//W3C event的pageX属性,鼠标相对于页面的X坐标
oEvent.pageX = oEvent.clientX + document.body.scrollLeft;
//W3C event的pageY属性,鼠标相对于页面的Y坐标
oEvent.pageY = oEvent.clientY + document.body.scrollTop;
//W3C event的preventDefault方法,阻止事件的默认行为
oEvent.preventDefault = function(){
this.returnValue = false;
};
//W3C event的relatedTarget属性,事件的第二目标,经常用于鼠标事件
if(oEvent.type == 'mouseout'){
oEvent.relatedTarget = oEvent.toElement;
}else if(oEvent.type == 'mouseover'){
oEvent.relatedTarget = oEvent.fromElement;
}
//W3C event的stopPropagation方法,取消冒泡事件
oEvent.stopPropagation = function(){
this.cancelBubble = true;
};
//W3C event的target属性
oEvent.target = oEvent.srcElement;
//W3C event的timestamp属性,创建当前时间,并返回毫秒数
oEvent.time = (new Date()).getTime();
}
return oEvent;
};
EventUtil.getEvent = function(){
if(window.event){
// IE 下返回event对象
return this.formatEvent(window.event);
}else{
// W3C 下返回event对象
return EventUtil.getEvent.caller.arguments[0];
}
};
document.getElementById('butt').onclick = function(){
var oEvent = EventUtil.getEvent();
alert(oEvent);
};
</script>
</html>

赞 (0)

相关推荐

  • js Event对象的5种坐标

    但是你懂的,浏览器实在太不和谐了,兼容性且不说,各种坐标属性看得人头昏眼花,极容易混淆.好吧,我来总结一下: 测试浏览器:IE8, Chrome13, FF8, Safari5, Opera11 先上测试用例(用HTML5的doctype测试,也可看出未来的发展趋势,其他doctype可自行测试): 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"

  • JavaScript event对象整理及详细介绍

    Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的元素: 3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下:(firefox中 0代表左键,1代表中间键,2代表右键) 4. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的左上角的位置:(在DOM标准中,这两个属性值都不考虑

  • javascript Event对象详解及使用示例

    Event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态.一旦事件发生,便会生成Event对象,如单击一个按钮,浏览器的内存中就产生相应的 event对象. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. [event属性]: altKey, button, cancelBubble, clientX, clien

  • js window.event对象详尽解析

    event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. 例子 下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转. <HTML> <HEAD><TITLE>Cancels Links</T

  • JS和JQ的event对象区别分析

    代码测试: 复制代码 代码如下: <div id="test"><p>test text<p></div> <script src="vendor/jquery-2.1.1.js"></script> <script> test.addEventListener('click', function(e){console.log(e);}, false), $('#test').on(

  • js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍

    IE 左键是 window.event.button = 1 右键是 window.event.button = 2 中键是 window.event.button = 4 没有按键动作window.event.button = 0 Firefox 左键是 event.button = 0 右键是 event.button = 2 中键是 event.button = 1 没有按键动作 event.button = 0 Opera 7.23/7.54 鼠标左键是 window.event.but

  • FireFox JavaScript全局Event对象

    FireFox JavaScript全局Event对象

    而在FireFox中却没有这样的对象,如果有函数嵌套调用,需要不停的向下传递Event,例如下面的场景. 复制代码 代码如下: <div style="background-color:Red; width:300px; height:300px;" onclick="Test(event,this);" id="panel"></div> function Test(event,dom){ Test1(event); }

  • JavaScript让IE浏览器event对象符合W3C DOM标准

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • 符合W3C网页标准的iframe标签的使用方法

    网站想改版,其中有一种广告的问题,以前每投放一个广告我都要把全站的文章都要更新一遍,这样既不便又不好!把网站以前推荐的一些文章都改成现在推荐的几个了!而且还浪费了我的时间.所以想使用Iframe来实现,但是直接使用iframe又不符合标准,那么该如何使用才能符合W3C的标准呢? 直接使用"IFRAME"不符合"W3C网页标准" 用JS来实现iframe 的标准化. 一.建立一个JS文件,代码如下: 复制代码 代码如下: function ifr(url,w,h){d

  • 符合W3C Web标准的图片连续无间隙水平滚动

    这次又遇上一个这样的问题,找了老半天终于从网上找到一个不错的,看了下代码,思路很简单,但代码太多,通用性也不行,于是乎,自己又发明了两个函数,用起来感觉还真不错,与大家共享: 图片连续无间隙向左滚动,无间隙向右滚动,符合W3C Web标准_ //调用向左滚动 toleft("demo","demo1","demo2",30,"hehe123") //调用向右滚动 toright("demo0","

  • Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3

    var patterns = {     HYPHEN: /(-[a-z])/i,     ROOT_TAG: /^body|html$/i }; var toCamel = function(property) {     // 如果没有 -[a-z] 字母,则直接返回     if ( !patterns.HYPHEN.test(property) ) {         return property;     } // 如果有缓存,直接返回替换后的值     if (propertyCa

  • JavaScript  event对象整理及详细介绍

    Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的元素: 3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下:(firefox中 0代表左键,1代表中间键,2代表右键) 4. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的左上角的位置:(在DOM标准中,这两个属性值都不考虑

  • event对象获取方法总结在google浏览器下测试

    简介: Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! Event对象的获取方法: 方法一: 例如: 复制代码 代码如下: function demo1(e){ var e = e || window.event; //此种方法在ie中和google中可以不传参数e也可以获取到event,但是在火狐中必须在事件方法中传递event参数 //才可以获取到event对象. } <input

随机推荐