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 相关文章推荐
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
详解ECharts使用心得总结
Dec 06 Javascript
js date 格式化
Feb 15 Javascript
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
vue 计时器组件的实现代码
Sep 14 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
vue项目中使用多选框的实例代码
Jul 22 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中实现中文字符进制转换原理分析
2011/12/06 PHP
smarty中post用法实例
2014/11/28 PHP
PHP中使用curl入门教程
2015/07/02 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
JS中showModalDialog 的使用解析
2013/04/17 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
vue3.0 上手体验
2020/09/21 Javascript
python创建线程示例
2014/05/06 Python
Python算法之栈(stack)的实现
2014/08/18 Python
python3实现windows下同名进程监控
2018/06/21 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
Python字典实现伪切片功能
2020/10/28 Python
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
工程概预算专业毕业生求职信
2013/10/04 职场文书
环境工程求职简历的自我评价范文
2013/10/24 职场文书
质检员岗位职责
2013/12/17 职场文书
关于幼儿的自我评价
2013/12/18 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
伏羲庙导游词
2015/02/09 职场文书
《正比例》教学反思
2016/02/23 职场文书
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python