IE的fireEvent方法概述及应用


Posted in Javascript onFebruary 22, 2013

在IE中提供了一个fireEvent方法,顾名思义就是触发某个事件发生的意思。刚开始我以为是会跟平时使用onclick()一样,没想到最近在写javascript入门ppt的时候发现了,原来自己太自以为是了!看来还有很多javascript的细节没有掌握好啊!

现在根据自己的总结详细的记录下fireEvent方法的使用。fireEvent是IE提供的一种方法,msdn文档地址:http://msdn.microsoft.com/en-us/library/ms536423(v=vs.85).aspx

onclick()
我们先看第一段实例代码:

<ul onclick='alert(event.srcElement.innerHTML);'> 
<li id='id1'>i am one;</li> 
<li id='id2'>i am two;</li> 
<li id='id3'>i am three;</li> 
</ul> 
<button onclick='document.getElementById("id1").onclick();'>click me!</button>

这段代码中我们没有个id1的li添加onclick事件,点击button,会报错,提示“对象不支持此属性或方法”。由此可见,DOM.onclick()需要添加onclick事件之后才能使用。

假如我们把以上的代码修改为

<ul onclick='alert(event.srcElement.innerHTML);'> 
<li id='id1' onclick='alert(1);'>i am one;</li> 
<li id='id2'>i am two;</li> 
<li id='id3'>i am three;</li> 
</ul> 
<button onclick='document.getElementById("id1").onclick();'>click me!</button>

此时,点击button会触发onclick事件,但是ul的onclick没有触发,这就表明了DOM.onclick()不存在冒泡。
fireEvent()
我们来看看fireEvent跟onclick()触发事件是否相同。看下面的代码:
<ul onclick='alert(event.srcElement.innerHTML);'> 
<li id='id1'>i am one;</li> 
<li id='id2'>i am two;</li> 
<li id='id3'>i am three;</li> 
</ul> 
<button onclick='document.getElementById("id1").fireEvent("onclick")'>fireEvent !</button>

点击button后,触发ul的onclick事件,说明fireEvent会引起冒泡,而且没有发生像onclick()提示“对象不支持此属性或方法”,说明即使不添加id1的onclick事件也可以冒泡。
由此可以看出,IE中的fireEvent方法类似模拟用户的鼠标点击行为,而不是单纯的onclick。

总结fireEvent和onclick区别
通过上面的例子可以看出,DOM的fireEvent和onclick(这只是个代表)有以下区别:
1.onclick需要DOM真正添加了onclick事件,否则会报“对象不支持此属性或方法”错误
2.onclick不会引起IE的冒泡过程,而fireEvent会引起冒泡,fireEvent更贴近用户真实的行为触发
3.由第二条得出,fireEvent在即使DOM没有click事件也可以fireEvent,而不会报错(更贴近用户真实行为)
最后可以拿下面的代码测试

<ul onclick='alert(event.srcElement.innerHTML);'> 
<li id='id1' onclick='alert(1);'>i am one;</li> 
<li id='id2'>i am two;</li> 
<li id='id3'>i am three;</li> 
</ul> 
<button onclick='document.getElementById("id1").onclick();'>click me!</button> 
<button onclick='document.getElementById("id1").fireEvent("onclick")'>fireEvent !</button>
Javascript 相关文章推荐
js监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
js继承的实现代码
Aug 05 Javascript
jquery实现的图片点击滚动效果
Apr 29 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
Javascript函数式编程语言
Oct 11 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
vue的mixins属性详解
Mar 14 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 Javascript
js取得url地址参数实例
Feb 22 #Javascript
js模拟滚动条(横向竖向)
Feb 22 #Javascript
js时间日期和毫秒的相互转换
Feb 22 #Javascript
jQuery的Ajax的自动完成功能控件简要说明
Feb 22 #Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 #Javascript
JS中不为人知的五种声明Number的方式简要概述
Feb 22 #Javascript
JS中令人发指的valueOf方法介绍
Feb 22 #Javascript
You might like
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
python里大整数相乘相关技巧指南
2014/09/12 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
Python中的变量和作用域详解
2016/07/13 Python
python模块常用用法实例详解
2019/10/17 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
CK美国官网:Calvin Klein
2016/08/26 全球购物
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
介绍一下木马病毒的种类
2015/07/26 面试题
机电专业大学生职业规划书范文
2014/02/25 职场文书
爱国影片观后感
2015/06/18 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
JavaScript 数组去重详解
2021/09/15 Javascript
nginx 配置指令之location使用详解
2022/05/25 Servers