IE事件对象(The Internet Explorer Event Object)


Posted in Javascript onJune 27, 2012

看下面的例子,

var btn = document.getElementById('mybtn'); 

btn.onclick = function(){ 


var event = window.event; 


alert(event.type);//"click" 

}

此时,event对象来源于window.event对象,并且之后又用于确定事件类型。然而,当eventHandler 通过attachEvent()这种方式来授权的话,event 对象将作为function的唯一参数,请看如下代码

var btn = document.getElementById("myBtn"); 
btn.attachEvent("onclick", function(event){ 
alert(event.type); //"click" 
});

当使用attachEvent() 方法时,事件对象同时也可以在window对象上进行访问,和dom 0级的实现方式一样,并且事件对象同样被传进来作为一个参数。

如果event Handler 是通过HTML属性被授权的,event是作为一个一个变量被访问的,叫做event。例如

<input type="button" value="Click Me" onclick="alert(event.type)">

IE 事件对象同样包含属性和方法,这与创建该特定事件有关。这些属性和方法,要么直接映射到DOM的属性和方法,要么与DOM的属性和方法相关。象DOM事件对象的属性和方法回由于出发事件的的不同而不同,但共有的方法如下:

cancleBubble 布尔 可读/可写 默认值时false,但可以被设置成true来取消事件冒泡,与dom中的 stopPropagation()方法相同。

returnValue 布尔 可读/可写 默认值是true,当设置成false时用以取消事件的默认行为 与dom中的preventDefault()相同。

srcElement  元素 只读

 事件的目标,与dom中的target属性相同。

type

 字符串 只读 被触发的事件类型。

因为event handler的事件作用域是由授权方式决定的,所以this的值不应该总指向这个事件的目标,所以用event.SrcElement 来代替。例子如下


btn.onclick = function(){ 
alert(window.event.srcElement === this); //true 
}; 
btn.attachEvent("onclick", function(event){ 
alert(event.srcElement === this); //false 
});

在第一个event handler中通过DOM0级的方式来授权,所以srcElement属性指向this,但在第二个 event handler中这两个值时不同的。

returnValue属性等同于DOM中的preventDefault()方法,同样是用来取消事件的默认行为,你需要将returnValue的属性值设置成false来取消事件的默认动作,请看如下例子;

var link = document.getElementById('myLink'); 
link.onclick = function(){ 
window.event.returnValue = false; 
};

在这个例子中,用returnValue属性来取消连接的默认行为。与dom不同的是,没有方法能够决定一个事件是否可以被取消或者禁用javascript。

cancleBubble属性与都没中stopPropagation()的功能相同,阻止事件的冒泡。因为IE8或者更早的IE版本,不支持事件捕捉阶段,而且cancleBubble只支持冒泡的取消,而stopPropagation()是取消事件的捕捉和冒泡。例如:

var btn = document.getElementById("myBtn"); 
btn.onclick = function(){ 
alert("Clicked"); 
window.event.cancelBubble = true; 
}; 
document.body.onclick = function(){ 
alert("Body clicked"); 
};

通过爱 onclick 这个handler中设置cancelBubble的值为true,他阻止了事件冒泡至document.body 的事件处理,因此当btn被点击的时候,结果只会弹出一个提示对话框,即"click"。

Javascript 相关文章推荐
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
关于document.cookie的使用javascript
Oct 29 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
微信小程序实现弹出菜单功能
Jun 12 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
跨浏览器的事件对象介绍
Jun 27 #Javascript
UI Events 用户界面事件
Jun 27 #Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 #Javascript
浅谈Javascript事件模拟
Jun 27 #Javascript
JS时间选择器 兼容IE6,7,8,9
Jun 26 #Javascript
基于jquery &amp; json的省市区联动代码
Jun 26 #Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 #Javascript
You might like
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
PHP判断指定时间段的2个方法
2014/03/14 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
python版学生管理系统
2018/01/10 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
Timberland法国官网:购买靴子、鞋子、衣服、夹克和配饰
2019/11/30 全球购物
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
触电现场处置方案
2014/05/14 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
小班下学期个人总结
2015/02/12 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP