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 相关文章推荐
JavaScript入门教程(6) Window窗口对象
Jan 31 Javascript
js 创建快捷方式的代码(fso)
Nov 19 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
Mar 06 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
Javascript核心读书有感之类型、值和变量
Feb 11 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
详解JS预解析原理
Jun 16 Javascript
vue实现滑动解锁功能
Mar 03 Vue.js
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表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
php生成zip压缩文件的方法详解
2013/06/09 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
Ajax基础知识详解
2017/02/17 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
javascript完美实现给定日期返回上月日期的方法
2017/06/15 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
Python入门之三角函数atan2()函数详解
2017/11/08 Python
python3 读取Excel表格中的数据
2018/10/16 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
在python里从协程返回一个值的示例
2019/02/19 Python
Python3爬楼梯算法示例
2019/03/04 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
主持人演讲稿范文
2013/12/28 职场文书
优秀毕业生事迹材料
2014/02/12 职场文书
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript