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 相关文章推荐
Javascript学习笔记1 数据类型
Jan 11 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
理解Javascript_06_理解对象的创建过程
Oct 15 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
jQuery中DOM操作原则实例分析
Aug 01 jQuery
layer.open回调获取弹出层参数的实现方法
Sep 10 Javascript
原生JS实现飞机大战小游戏
Jun 09 Javascript
JavaScript实现栈结构详细过程
Dec 06 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
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
php 用sock技术发送邮件的函数
2007/07/21 PHP
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
css图片自适应大小
2007/11/28 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
python实现定时提取实时日志程序
2018/06/22 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
python基础学习之如何对元组各个元素进行命名详解
2018/07/12 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
python ChainMap的使用和说明详解
2019/06/11 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
Python学习之time模块的基本使用
2021/01/17 Python
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
幼儿园园长安全责任书
2015/05/08 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript