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 EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
angular.element方法汇总
Jan 07 Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
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 mysql数据库操作类
2008/06/04 PHP
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
Vue程序调试的方法
2019/06/17 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
python函数参数*args**kwargs用法实例
2013/12/04 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
高中毕业生自我鉴定范文
2013/09/26 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
环境卫生整治简报
2015/07/20 职场文书
学生会部长竞选稿
2015/11/19 职场文书