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 相关文章推荐
createElement动态创建HTML对象脚本代码
Nov 24 Javascript
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
create-react-app开发常用配置教程
Jun 25 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实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
php use和include区别总结
2019/10/13 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
python使用matplotlib画饼状图
2018/09/25 Python
从0开始的Python学习016异常
2019/04/08 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
教师求职信范文分享
2013/12/27 职场文书
幸福家庭事迹材料
2014/02/03 职场文书
购房意向书
2014/04/01 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
老乡聚会通知
2015/04/23 职场文书
小学生表扬稿范文
2015/05/05 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
详细聊聊vue中组件的props属性
2021/11/02 Vue.js