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 对象的定义方法
Jan 10 Javascript
Jquery插件之多图片异步上传
Oct 20 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
Apr 23 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
vue+element+Java实现批量删除功能
Apr 08 Javascript
微信小程序开发之转发分享功能
Oct 22 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
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
PHP的简易冒泡法代码分享
2012/08/28 PHP
PHP中常用的转义函数
2014/02/28 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
2018/03/27 全球购物
联想C++笔试题
2012/06/13 面试题
化学相关工作求职信
2013/10/02 职场文书
大学生学习自我评价
2014/01/13 职场文书
安全口号大全
2014/06/21 职场文书
生活部的活动方案
2014/08/19 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
nginx共享内存的机制详解
2022/03/21 Servers
Python装饰器详细介绍
2022/03/25 Python