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根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
JSON 数据格式详解
Sep 13 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
VUE前后端学习tab写法实例
Aug 06 Javascript
Node.js API详解之 console模块用法详解
May 12 Javascript
对vue生命周期的深入理解
Dec 03 Vue.js
Js类的构建与继承案例详解
Sep 15 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关联链接常用代码
2012/11/05 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
批量实现面向对象的实例代码
2013/07/01 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
js实现动态时钟
2020/03/12 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
python实现网站的模拟登录
2016/01/04 Python
小小聊天室Python代码实现
2016/08/17 Python
Python3中exp()函数用法分析
2019/02/19 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
用Python制作音乐海报
2021/01/26 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
Marlies Dekkers内衣美国官方网上商店:高端内衣品牌
2018/11/12 全球购物
构造器Constructor是否可被override?
2013/08/06 面试题
应届生的求职推荐信范文
2013/11/30 职场文书
档案检查欢迎词
2014/01/13 职场文书
文明城市标语
2014/06/16 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
Python实现简单得递归下降Parser
2022/05/02 Python
MySQL添加索引特点及优化问题
2022/07/23 MySQL
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS