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 相关文章推荐
javascript客户端解决方案 缓存提供程序
Jul 14 Javascript
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
webpack3升级到webpack4遇到问题总结
Sep 30 Javascript
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
跨浏览器的事件对象介绍
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
php操作excel文件 基于phpexcel
2010/07/02 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
python实现定时播放mp3
2015/03/29 Python
浅谈Python处理PDF的方法
2017/11/10 Python
用python实现百度翻译的示例代码
2018/03/09 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
python浪漫表白源码
2019/04/05 Python
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
学校运动会开幕演讲稿
2014/01/04 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
电子信息专业应届生自荐信
2014/06/04 职场文书
庆元旦活动总结
2014/07/09 职场文书
供电工程专业求职信
2014/08/09 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
感谢信
2019/04/11 职场文书
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB
Python实现自动玩连连看的脚本分享
2022/04/04 Python
Python中的 enumerate和zip详情
2022/05/30 Python