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 相关文章推荐
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
Dec 03 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
package.json文件配置详解
Jun 15 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
vue 动态添加class,三个以上的条件做判断方式
Nov 02 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 MSSQL 存储过程的方法
2008/12/24 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
js 窗口抖动示例
2013/09/04 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
利用js定义一个导航条菜单
2017/03/14 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
深入解析Python中的集合类型操作符
2015/08/19 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
python操作excel让工作自动化
2019/08/09 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
python画环形图的方法
2020/03/25 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
python基于pexpect库自动获取日志信息
2021/02/01 Python
购买大码女装:Lane Bryant
2016/09/07 全球购物
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
医学专业五年以上个人求职信
2013/12/03 职场文书
2014感恩节演讲稿大全
2014/10/11 职场文书