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控制淡入淡出示例代码
Nov 12 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
JavaScript实现N皇后问题算法谜题解答
Dec 29 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 Javascript
jQuery事件对象的属性和方法详解
Sep 09 jQuery
微信小程序实现默认第一个选中变色效果
Jul 17 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
Sep 22 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
vue父子组件通信的高级用法示例
Aug 29 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
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
用穿越火线快速入门php面向对象
2012/02/22 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
python正则表达式中的括号匹配问题
2014/12/14 Python
仅利用30行Python代码来展示X算法
2015/04/01 Python
python开发中range()函数用法实例分析
2015/11/12 Python
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
python的range和linspace使用详解
2019/11/27 Python
python创建n行m列数组示例
2019/12/02 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
幼儿园父亲节活动方案
2014/03/11 职场文书
初中学校军训方案
2014/05/09 职场文书
施工安全标语
2014/06/07 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
新闻传播专业求职信
2014/07/22 职场文书
公证委托书标准格式
2014/09/11 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
2014年领班工作总结
2014/11/25 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL