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 相关文章推荐
jquery 分页控件实现代码
Nov 30 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
解决Layui 表单提交数据为空的问题
Aug 15 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
小程序中设置缓存过期的实现方法
Jan 14 Javascript
JS实现京东商品分类侧边栏
Dec 11 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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
php 变量未定义等错误的解决方法
2011/01/12 PHP
深入PHP数据缓存的使用说明
2013/05/10 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
javascript 写类方式之五
2009/07/05 Javascript
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python 2与Python 3版本和编码的对比
2017/02/14 Python
基于python实现高速视频传输程序
2019/05/05 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
Servlet方面面试题
2016/09/28 面试题
物流管理专业求职信
2014/05/29 职场文书
物理教育专业求职信
2014/06/25 职场文书
力学专业求职信
2014/07/23 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
小学语文教学随笔
2015/08/14 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
Python 中 Shutil 模块详情
2021/11/11 Python