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 相关文章推荐
juqery 学习之三 选择器 层级 基本
Nov 25 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
Express.JS使用详解
Jul 17 Javascript
Node.js中npm常用命令大全
Jun 09 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 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
cmd下运行php脚本
2008/11/25 PHP
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
Python 3.8 新功能全解
2019/07/25 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
澳大利亚珠宝商:Shiels
2019/10/06 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
四年大学自我鉴定
2014/02/17 职场文书
任命书怎么写
2014/06/04 职场文书
田径运动会通讯稿
2014/09/13 职场文书
合作协议书范本
2014/10/25 职场文书
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电
mysql sock 文件解析及作用讲解
2022/07/15 MySQL
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技