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 相关文章推荐
ASP SQL防注入的方法
Dec 25 Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 Javascript
JQ实现新浪游戏首页幻灯片
Jul 29 Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
Laravel admin实现消息提醒、播放音频功能
Jul 10 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
Apr 26 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 Javascript
javascript实现贪吃蛇小练习
Jul 05 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
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
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
用PHP和ACCESS写聊天室(九)
2006/10/09 PHP
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
关于全局变量和局部变量的那些事
2013/01/11 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
项目经理的岗位职责
2013/11/23 职场文书
高三体育教学反思
2014/01/29 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
紫日观后感
2015/06/05 职场文书
新课程改革心得体会
2016/01/22 职场文书
Java界面编程实现界面跳转
2022/06/16 Java/Android