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 相关文章推荐
showModelessDialog()使用详解
Sep 07 Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
Nov 07 Javascript
解析JavaScript中的标签语句
Jun 19 Javascript
javascript设计模式之解释器模式详解
Jun 05 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
Jun 18 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
微信小程序 开发工具快捷键整理
Oct 31 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 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
做一个有下拉功能的留言版
2006/10/09 PHP
php 从数据库提取二进制图片的处理代码
2009/09/09 PHP
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
一个PHP分页类的代码
2011/05/18 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
jQuery 一个图片切换的插件
2011/10/09 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
Python常用的json标准库
2019/02/19 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
wxPython多个窗口的基本结构
2019/11/19 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
如何用python 操作zookeeper
2020/12/28 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
SQL Server面试题
2013/04/04 面试题
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
网络编辑求职信
2014/04/30 职场文书
绿色环保标语
2014/06/12 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
优秀党员推荐材料
2014/12/18 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
springboot读取nacos配置文件
2022/05/20 Java/Android