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 相关文章推荐
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 Javascript
Vue中的$set的使用实例代码
Oct 08 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
fastadmin中调用js的方法
May 14 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 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
探寻PHP脚本不报错的原因
2014/06/12 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
python中字符串变二维数组的实例讲解
2018/04/03 Python
python 多个参数不为空校验方法
2019/02/14 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
python实现文法左递归的消除方法
2020/05/22 Python
悦木之源美国官网:Origins美国
2016/08/01 全球购物
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
销售人员求职的自我评价分享
2014/03/15 职场文书
2015年仓库管理员工作总结
2015/04/21 职场文书
退货证明模板
2015/06/23 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL