JavaScript之IE的fireEvent方法详细解析


Posted in Javascript onNovember 20, 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(这只是个代表)有以下区别:

onclick需要DOM真正添加了onclick事件,否则会报“对象不支持此属性或方法”错误
onclick不会引起IE的冒泡过程,而fireEvent会引起冒泡,fireEvent更贴近用户真实的行为触发
由第二条得出,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 相关文章推荐
tbody元素支持嵌套的注意方法
Mar 24 Javascript
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
Sep 02 Javascript
jquery自定义属性(类型/属性值)
May 21 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
JS限制条件补全问题实例分析
Dec 16 Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 Javascript
vue2中使用less简易教程
Mar 27 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
如何使用JavaScript实现栈与队列
Jun 24 Javascript
vue实现扫码功能
Jan 17 Javascript
JavaScript严格模式不支持八进制的问题讲解
Nov 07 Javascript
JavaScript中setInterval的用法总结
Nov 20 #Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 #Javascript
jquery iframe操作详细解析
Nov 20 #Javascript
JS获取当前日期和时间的简单实例
Nov 19 #Javascript
js 自动播放的实例代码
Nov 19 #Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 #Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 #Javascript
You might like
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
Python生成随机密码
2015/03/10 Python
python根据出生年份简单计算生肖的方法
2015/03/27 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
Python实现微信小程序支付功能
2019/07/25 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
英语专业毕业个人求职自荐信
2013/09/21 职场文书
司机岗位职责
2013/11/15 职场文书
租赁协议书范本
2014/04/22 职场文书
就业协议书样本
2014/08/20 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
建国大业电影观后感
2015/06/01 职场文书