IE的fireEvent方法概述及应用
更新时间：2013年02月22日 15:59:36 作者：
IE中提供了一个fireEvent方法大概就是触发某个事件发生的意思，以为是和onclick()一样，看来是我自已为是了,有时间还要多看看javascript的细节啊,广大网友也是啊
在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>
现在根据自己的总结详细的记录下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>
您可能感兴趣的文章:
相关文章
本文为大家详细介绍下js将long日期格式转换为标准日期格式,感兴趣的朋友可以参考下哈，希望可以帮助到你2013-04-04
解决layui前端框架 form表单,table表等内置控件不显示的问题
今天小编就为大家分享一篇解决layui前端框架 form表单,table表等内置控件不显示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了js实现日期比较相关天数的方法,需要的朋友可以参考下2014-04-04
uni-app是一种基于Vue.js的跨平台开发框架,允许开发者使用统一的代码编写多端应用,这篇文章主要给大家介绍了关于uni-app app引入天地图的相关资料,需要的朋友可以参考下2024-02-02
JavaScript如何使用dhtmlXTreeObject的loadJSONObject绘制目录树
这篇文章主要介绍了JavaScript如何使用dhtmlXTreeObject的loadJSONObject绘制目录树,需要引入dhtmlXTreeObject的css和js文件,这里还需要注意js的引用顺序,本文给大家介绍的非常详细,需要的的朋友参考下吧2023-11-11
这篇文章主要介绍了JavaScript数组的使用方法，数组（Array）是有序的元素序列。若将有限个类型相同的变量的集合命名，那么这个名称为数组名，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
链表是一系列节点串联形成的数据结构,链表存储有序的元素集合,链表中的元素在内存中并不是连续放置的,本文给大家介绍了在JavaScript中怎么实现链表,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了javascript的事件触发器介绍的实现,本文所指触发器是用程序来触发绑定的事件,而不是人为的去触发,需要的朋友可以参考下2014-06-06
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
mouseover ,mouseout ,mouseenter,mouseleave，都是鼠标点击而触发的事件，各自代表什么意思，有哪些区别呢？下面跟着脚本之家小编一起看看吧2015-10-10
substring是从中截取一段字符串,在组成一个新的字符串,这篇文章主要介绍了js中substring使用示例小结,本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下2024-01-01
最新评论