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 相关文章推荐
js 键盘记录实现(兼容FireFox和IE)
Feb 07 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
JavaScript中常用的六种互动方法示例
Mar 13 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
Jul 25 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 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
php学习之流程控制实现代码
2011/06/09 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
asp 取文本框名称代码
2008/12/02 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
python支持断点续传的多线程下载示例
2014/01/16 Python
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
详解Python3中字符串中的数字提取方法
2017/01/14 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
医学毕业生自荐信
2013/10/11 职场文书
个人简历自我评价
2014/01/06 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
城市创卫标语
2014/06/17 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL
MySQL创建管理LIST分区
2022/04/13 MySQL