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 函数属性和方法
Jan 21 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
vue 文件目录结构详解
Nov 24 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
Angular8 Http拦截器简单使用教程
Aug 20 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 Javascript
javascript解析json格式的数据方法详解
Aug 07 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
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
一个数据采集类
2007/02/14 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
python抓取网页图片并放到指定文件夹
2014/04/24 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
python 发送json数据操作实例分析
2019/10/15 Python
python实现超市商品销售管理系统
2019/11/22 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
Python reduce函数作用及实例解析
2020/05/08 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
请介绍一下Ant
2016/07/22 面试题
结构和类有什么异同
2012/07/16 面试题
远东集团网络工程师面试题
2014/10/20 面试题
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
详解Nginx启动失败的几种错误处理
2021/04/01 Servers
Redis三种集群模式详解
2021/10/05 Redis
Win11更新失败并提示0xc1900101
2022/04/19 数码科技