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提示 &quot;object expected&quot;的解决方法
Dec 13 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
一个简单的JavaScript数据缓存系统实现代码
Oct 24 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
Jquery chosen动态设置值实例介绍
Aug 08 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 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实现短域名互转
2013/07/05 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
js中日期的加减法
2015/05/06 Javascript
浅析JavaScript动画
2015/06/10 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
深入理解Promise.all
2018/08/08 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
python距离测量的方法
2018/03/06 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
django从后台返回html代码的实例
2020/03/11 Python
python IDLE添加行号显示教程
2020/04/25 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
小区门卫值班制度
2014/01/24 职场文书
给上级领导的感谢信
2015/01/22 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python