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的一些注意
Dec 06 Javascript
根据一段代码浅谈Javascript闭包
Dec 14 Javascript
js substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
js中parseInt函数浅谈
Jul 31 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
jQuery插件扩展测试实例
Jun 21 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
sea.js常用的api简易文档
Nov 15 Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 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图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
有趣的bootstrap走动进度条
2016/12/01 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
python实现的文件同步服务器实例
2015/06/02 Python
python opencv摄像头的简单应用
2019/06/06 Python
centos7之Python3.74安装教程
2019/08/15 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
教师党员思想汇报
2014/01/06 职场文书
医院检讨书范文
2014/02/01 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
个人租房协议书范本
2014/09/30 职场文书
钳工实训报告总结
2014/11/04 职场文书
撤诉状格式范本
2015/05/19 职场文书
初中生物教学随笔
2015/08/15 职场文书
科级干部培训心得体会
2016/01/06 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js