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 学习笔记(九)call和apply方法
Jan 11 Javascript
基于jquery.Jcrop的头像编辑器
Mar 01 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
javascript实现文本域写入字符时限定字数
Feb 12 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
Dec 19 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
Dec 28 Javascript
详解Vue监听数据变化原理
Mar 08 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 Javascript
使用typescript构建Vue应用的实现
Aug 26 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 isset()与empty()的使用区别详解
2010/08/29 PHP
PHP小技巧之函数重载
2014/06/02 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
javascript常见用法总结
2014/05/22 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
200 行python 代码实现 2048 游戏
2018/01/12 Python
python使用tkinter实现简单计算器
2018/01/30 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
python实现简单多人聊天室
2018/12/11 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
python实现月食效果实例代码
2019/06/18 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
基于Python快速处理PDF表格数据
2020/06/03 Python
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
DataReader和DataSet的异同
2014/12/31 面试题
新大陆软件面试题
2016/11/24 面试题
在职证明范本
2015/06/15 职场文书
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis
threejs太阳光与阴影效果实例代码
2022/04/05 Javascript
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis