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文件缓存之版本管理详解
Jul 05 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
基于JavaScript实现随机颜色输入框
Dec 10 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
微信小程序实现发红包功能
Jul 11 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
图书管理程序(三)
2006/10/09 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
javascript中callee与caller的用法和应用场景
2010/12/08 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
python的dict,set,list,tuple应用详解
2014/07/24 Python
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
使用Python生成随机密码的示例分享
2016/02/18 Python
实例讲解Python中函数的调用与定义
2016/03/14 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
python redis存入字典序列化存储教程
2020/07/16 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
快速解决pymongo操作mongodb的时区问题
2020/12/05 Python
HTML5未来发展趋势
2016/02/01 HTML / CSS
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
荟萃全球保健品:维他购
2018/05/09 全球购物
什么是组件架构
2016/05/15 面试题
银行个人求职自荐信范文
2013/12/16 职场文书
会计辞职信范文
2014/01/15 职场文书
cf搞笑广告词
2014/03/14 职场文书
交通事故私了协议书
2014/04/16 职场文书
教师对学生的评语
2014/04/28 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
铣工实训报告
2014/11/05 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
golang 如何通过反射创建新对象
2021/04/28 Golang
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python