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 相关文章推荐
Div Select挡住的解决办法
Aug 07 Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
js控制的遮罩层实例介绍
May 29 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
vue中监听路由参数的变化及方法
Dec 06 Javascript
使用vant的地域控件追加全部选项
Nov 03 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调用mysql存储过程
2007/02/14 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
window.location.hash 使用说明
2010/11/08 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
原生javascript和jquery判断浏览器版本等信息
2013/07/04 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
实现一个完整的Node.js RESTful API的示例
2017/09/29 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
python k-近邻算法实例分享
2014/06/11 Python
python实现获取Ip归属地等信息
2016/08/27 Python
利用Python开发实现简单的记事本
2016/11/15 Python
python绘制条形图方法代码详解
2017/12/19 Python
Python人脸识别初探
2017/12/21 Python
Python实现简单http服务器
2018/04/12 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
Python连接字符串过程详解
2020/01/06 Python
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
Java程序员面试题
2013/07/15 面试题
营销专业应届生求职信
2013/11/26 职场文书
档案工作汇报材料
2014/08/21 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
庆七一活动总结
2014/08/27 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
小学生教师节广播稿
2015/08/19 职场文书