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 相关文章推荐
对象的类型:本地对象(1)
Dec 29 Javascript
js的闭包的一个示例说明
Nov 18 Javascript
jquery遍历input取得input的name
Apr 27 Javascript
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
jquery获取一组checkbox的值(实例代码)
Nov 04 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
Feb 20 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
跟混乱的页面弹窗说再见
Apr 11 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
JavaScript获取某一天所在的星期
Sep 05 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
PHP:风雨欲来 路在何方?
2006/10/09 PHP
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
php 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
js css自定义分页效果
2017/02/24 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
跟老齐学Python之折腾一下目录
2014/10/24 Python
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
Python中查看文件名和文件路径
2017/03/31 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
超实用的 30 段 Python 案例
2019/10/10 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
应用服务器有那些
2012/01/19 面试题
幼儿园运动会加油词
2014/02/14 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书