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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
ext jquery 简单比较
Apr 07 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
微信小程序开发实现消息推送
Nov 18 Javascript
ES6 Object属性新的写法实例小结
Jun 25 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
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
用PHP实现将GB编码转换为UTF8
2006/11/25 PHP
功能强大的php分页函数
2016/07/20 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
JS target与currentTarget区别说明
2011/08/28 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
python中实现数组和列表读取一列的方法
2018/04/03 Python
Python调用Redis的示例代码
2020/11/24 Python
python实现银行账户系统
2021/02/22 Python
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
金讯Java笔试题目
2013/06/18 面试题
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
幼儿园校车司机的岗位职责
2014/01/30 职场文书
军校大学生个人的自我评价
2014/02/17 职场文书
餐厅执行经理岗位职责范本
2014/02/26 职场文书
小学庆六一活动方案
2014/02/28 职场文书
供货协议书
2014/04/22 职场文书
大学生操行评语大全
2014/12/31 职场文书
外国人来华邀请函
2015/01/31 职场文书
职工食堂管理制度
2015/08/06 职场文书
离婚协议书格式范本
2016/03/18 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python