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 相关文章推荐
JQuery扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
网页中可关闭的漂浮窗口实现可自行调节
Aug 20 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
原生js模拟淘宝购物车项目实战
Nov 18 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
详解jquery选择器的原理
Aug 01 jQuery
vue实现一个炫酷的日历组件
Oct 08 Javascript
clipboard在vue中的使用的方法示例
Oct 19 Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 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中使用Oracle数据库(2)
2006/10/09 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
js 数值项目的格式化函数代码
2010/05/14 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
Python用zip函数同时遍历多个迭代器示例详解
2016/11/14 Python
python实现数据图表
2017/07/29 Python
python读取xlsx的方法
2018/12/25 Python
Python中最好用的命令行参数解析工具(argparse)
2019/08/23 Python
如何清空python的变量
2020/07/05 Python
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
美国第一香水网站:Perfume.com
2017/01/23 全球购物
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
教室布置标语
2014/06/26 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
会议欢迎词范文
2015/01/27 职场文书
2015年人事科工作总结
2015/04/28 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android
Vue3中的Refs和Ref详情
2021/11/11 Vue.js