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 DIV弹出效果实现代码
Jul 03 Javascript
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
如何提高Dom访问速度
Jan 05 Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 Javascript
vue axios 表单提交上传图片的实例
Mar 16 Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 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
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
JavaScript实现删除电脑的关机键
2016/07/26 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
Python爬豆瓣电影实例
2018/02/23 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
解决python replace函数替换无效问题
2020/01/18 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
销售人员自我评价怎么写
2013/09/19 职场文书
创先争优承诺书范文
2014/03/31 职场文书
企业趣味活动方案
2014/08/21 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android