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 相关文章推荐
js 实现菜单上下显示附效果图
Nov 21 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
Vue异步加载about组件
Oct 31 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
Node.js net模块功能及事件监听用法分析
Jan 05 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
vue远程加载sfc组件思路详解
Dec 25 Javascript
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
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
Javascript 面试题随笔
2011/03/31 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
python处理文本文件并生成指定格式的文件
2014/07/31 Python
Python实现队列的方法
2015/05/26 Python
基于python中的TCP及UDP(详解)
2017/11/06 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
python常用运维脚本实例小结
2020/02/14 Python
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
肯尼迪就职演说稿
2013/12/31 职场文书
自考生自我评价分享
2014/01/18 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
家长会标语
2014/06/24 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
人事文员岗位职责
2015/02/04 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python