JavaScript之IE的fireEvent方法详细解析


Posted in Javascript onNovember 20, 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(这只是个代表)有以下区别:

onclick需要DOM真正添加了onclick事件,否则会报“对象不支持此属性或方法”错误
onclick不会引起IE的冒泡过程,而fireEvent会引起冒泡,fireEvent更贴近用户真实的行为触发
由第二条得出,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实现一个页面多个css样式实现
May 29 Javascript
Exitjs获取DataView中图片文件名
Nov 26 Javascript
Express.JS使用详解
Jul 17 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
Javascript学习指南
Dec 01 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 Javascript
JavaScript中const、var和let区别浅析
Oct 11 Javascript
详解webpack2+React 实例demo
Sep 11 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
vue props对象validator自定义函数实例
Nov 13 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 Javascript
js实现弹幕墙效果
Dec 10 Javascript
JavaScript中setInterval的用法总结
Nov 20 #Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 #Javascript
jquery iframe操作详细解析
Nov 20 #Javascript
JS获取当前日期和时间的简单实例
Nov 19 #Javascript
js 自动播放的实例代码
Nov 19 #Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 #Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 #Javascript
You might like
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
PHP会话处理的10个函数
2015/08/11 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
详解ESLint在Vue中的使用小结
2018/10/15 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
vue实现购物车加减
2020/05/30 Javascript
Python标准库之随机数 (math包、random包)介绍
2014/11/25 Python
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
python实现搜索文本文件内容脚本
2018/06/22 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
番木瓜健康和保健产品第一大制造商:Herbal Papaya
2017/04/25 全球购物
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
物流专业求职计划书
2014/01/10 职场文书
业务总经理岗位职责
2014/02/03 职场文书
黄河的主人教学反思
2014/02/07 职场文书
经典广告词大全
2014/03/14 职场文书
委托书样本
2014/04/02 职场文书
教室标语大全
2014/06/21 职场文书
师范毕业生求职信
2014/07/11 职场文书
见习报告的格式
2014/11/04 职场文书
2015年度物流工作总结
2015/04/30 职场文书
员工福利申请报告
2015/05/15 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书
人身损害赔偿协议书
2016/03/22 职场文书