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 JSON操作入门实例
Apr 16 Javascript
ParseInt函数参数设置介绍
Jan 02 Javascript
javascript每日必学之继承
Feb 23 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
详解webpack多页面配置记录
Jan 22 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
js实现幻灯片轮播图
Aug 14 Javascript
jQuery实现本地存储
Dec 22 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
apache php模块整合操作指南
2012/11/16 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
2017/02/19 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
python django集成cas验证系统
2014/07/14 Python
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
详解Python 循环嵌套
2020/07/09 Python
如何利用Python写个坦克大战
2020/11/18 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
工程部经理岗位职责
2013/12/08 职场文书
《影子》教学反思
2014/02/21 职场文书
入党自荐书范文
2014/03/09 职场文书
护士长竞聘书
2014/03/31 职场文书
离婚协议书格式
2014/11/21 职场文书
2016教师节问候语
2015/11/10 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript