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 相关文章推荐
lib.utf.js
Aug 21 Javascript
web性能优化之javascript性能调优
Dec 28 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
js opener的使用详解
Jan 11 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
js+html获取系统当前时间
Nov 10 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
js实现简单的轮播图效果
Dec 13 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 Javascript
javascript函数式编程基础
Sep 15 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
10条PHP编程习惯助你找工作
2008/09/29 PHP
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
获取body标签的两种方法
2011/10/13 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
Django如何将URL映射到视图
2019/07/29 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
实例代码讲解Python 线程池
2020/08/24 Python
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
公司清洁工岗位职责
2013/12/14 职场文书
乡镇干部先进事迹材料
2014/02/03 职场文书
老师对学生的评语
2014/04/18 职场文书
企业文化演讲稿
2014/05/20 职场文书
音乐幼师求职信
2014/07/09 职场文书
大专生自我鉴定怎么写
2014/09/16 职场文书
材料员岗位职责
2015/02/10 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python