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广告代码
May 30 Javascript
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
Aug 05 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
微信小程序时间选择插件使用详解
Dec 28 Javascript
微信打开网址添加在浏览器中打开提示的办法
May 20 Javascript
js 实现ajax发送步骤过程详解
Jul 25 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
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
Zerg剧情介绍
2020/03/14 星际争霸
php 求质素(素数) 的实现代码
2011/04/12 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
js判断屏幕分辨率的代码
2013/07/16 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
基于python编写的微博应用
2014/10/17 Python
Python实现的递归神经网络简单示例
2017/08/11 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
什么是GWT的Module
2013/01/20 面试题
网络工程专业毕业生推荐信
2013/10/28 职场文书
物流管理专业应届生求职信
2013/11/21 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
学雷锋标语
2014/06/25 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
个人整改措施书面材料
2014/10/24 职场文书
群众路线自查自纠工作情况报告
2014/10/28 职场文书
蓬莱阁导游词
2015/02/04 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
学术会议通知范文
2015/04/15 职场文书
环保主题班会教案
2015/08/13 职场文书
高一化学教学反思
2016/02/22 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书