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中为元素加上name属性的方法
May 09 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
Apr 02 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
JS获取单击按钮单元格所在行的信息
Jun 17 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
Jun 26 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
Ant Design的Table组件去除
Oct 24 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多用户计数器代码
2007/03/11 PHP
PHP中static关键字原理的学习研究分析
2011/07/18 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
js实现楼层导航功能
2017/02/23 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
浅谈python迭代器
2017/11/08 Python
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
Python异常的检测和处理方法
2018/10/26 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
python交易记录整合交易类详解
2019/07/03 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
外贸采购员求职的自我评价
2013/11/26 职场文书
会计职业生涯规划书
2014/01/13 职场文书
高中运动会广播稿
2014/01/21 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
开学典礼演讲稿
2014/05/23 职场文书
计算机毕业生求职信
2014/06/10 职场文书
小学教代会开幕词
2016/03/04 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python
MySQL慢查询优化解决问题
2022/03/17 MySQL
windows系统安装配置nginx环境
2022/06/28 Servers