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表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
Javascript的闭包详解
Dec 26 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
深入浅析react native es6语法
Dec 09 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
详解js中Array的方法及技巧
Sep 12 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
Apr 09 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
vue 自定义右键样式的实例代码
Nov 06 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
JQuery省市联动效果实现过程详解
May 08 jQuery
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
使用php4加速网络传输
2006/10/09 PHP
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
javascript RadioButtonList获取选中值
2009/04/09 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
JS高级运动实例分析
2016/12/20 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
Python使用gensim计算文档相似性
2016/04/10 Python
django实现前后台交互实例
2017/08/07 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
农田水利实习自我鉴定
2013/09/19 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
婚礼家长致辞
2015/07/27 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫