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 相关文章推荐
农历与西历对照
Sep 06 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
js里怎么取select标签里的值并修改
Dec 10 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 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程序--记数器
2006/10/09 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
浅析return false的正确使用
2013/11/04 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
react 创建单例组件的方法
2018/04/26 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
Django实现组合搜索的方法示例
2018/01/23 Python
python随机数分布random均匀分布实例
2019/11/27 Python
python对Excel的读取的示例代码
2020/02/14 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
Python如何操作docker redis过程解析
2020/08/10 Python
Python实现手势识别
2020/10/21 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
什么是事务?事务有哪些性质?
2012/03/11 面试题
2014元旦晚会策划方案
2014/02/19 职场文书
青年文明号创建承诺
2014/03/31 职场文书
社会实践活动总结
2015/02/05 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
python 三边测量定位的实现代码
2021/04/22 Python
JavaScript控制台的更多功能
2021/04/28 Javascript