IE的fireEvent方法概述及应用


Posted in Javascript onFebruary 22, 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(这只是个代表)有以下区别:
1.onclick需要DOM真正添加了onclick事件,否则会报“对象不支持此属性或方法”错误
2.onclick不会引起IE的冒泡过程,而fireEvent会引起冒泡,fireEvent更贴近用户真实的行为触发
3.由第二条得出,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中继承的一些示例方法与属性参考
Aug 07 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
Ajax同步与异步传输的示例代码
Nov 21 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
详解webpack 多入口配置
Jun 16 Javascript
webpack4的迁移的使用方法
May 25 Javascript
详解javascript对数组和json数组的操作
Apr 15 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 Javascript
js取得url地址参数实例
Feb 22 #Javascript
js模拟滚动条(横向竖向)
Feb 22 #Javascript
js时间日期和毫秒的相互转换
Feb 22 #Javascript
jQuery的Ajax的自动完成功能控件简要说明
Feb 22 #Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 #Javascript
JS中不为人知的五种声明Number的方式简要概述
Feb 22 #Javascript
JS中令人发指的valueOf方法介绍
Feb 22 #Javascript
You might like
用PHP实现ODBC数据分页显示一例
2006/10/09 PHP
E路文章系统PHP
2006/12/11 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
javascript 鼠标滚轮事件
2009/04/09 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
JS面向对象编程详解
2016/03/06 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
鲜果饮品店创业计划书
2014/01/21 职场文书
会议活动邀请函
2014/01/27 职场文书
工商治理实习生的自我评价分享
2014/02/20 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
平安工地汇报材料
2014/08/19 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
安全教育观后感
2015/06/17 职场文书
婚宴领导致辞
2015/07/28 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书