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获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 Javascript
学习JavaScript设计模式之策略模式
Jan 12 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 Javascript
vue项目创建步骤及路由router
Jan 14 Javascript
Vue页面跳转传递参数及接收方式
Sep 09 Javascript
vue+elementUI实现简单日历功能
Sep 24 Javascript
vue实现广告栏上下滚动效果
Nov 26 Vue.js
跨浏览器的事件对象介绍
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
用文本作数据处理
2006/10/09 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
php函数连续调用实例分析
2015/07/30 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
js实现查询商品案例
2020/07/22 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
Python运算符重载详解及实例代码
2017/03/07 Python
python获取Pandas列名的几种方法
2019/08/07 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
幼儿教师思想汇报
2014/01/10 职场文书
女方回门宴答谢词
2014/01/14 职场文书
岗位说明书标准范本
2014/07/30 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
SQL SERVER中的流程控制语句
2022/05/25 SQL Server