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 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
详解AngularJS controller调用factory
May 19 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
angular组件间传值测试的方法详解
May 07 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
PHP4实际应用经验篇(2)
2006/10/09 PHP
PHP语法速查表
2006/12/06 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
详解javascript遍历方式
2015/11/11 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
用python找出那些被“标记”的照片
2017/04/20 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
Python小白垃圾回收机制入门
2020/06/09 Python
餐饮加盟计划书
2014/01/10 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
销售助理岗位职责
2015/02/11 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS
解决Oracle数据库用户密码过期
2022/05/11 Oracle