JavaScript之IE的fireEvent方法详细解析

在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(这只是个代表)有以下区别:

onclick需要DOM真正添加了onclick事件,否则会报“对象不支持此属性或方法”错误
onclick不会引起IE的冒泡过程,而fireEvent会引起冒泡,fireEvent更贴近用户真实的行为触发
由第二条得出,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>

(0)

相关推荐

  • IE的fireEvent方法概述及应用

    在IE中提供了一个fireEvent方法,顾名思义就是触发某个事件发生的意思.刚开始我以为是会跟平时使用onclick()一样,没想到最近在写javascript入门ppt的时候发现了,原来自己太自以为是了!看来还有很多javascript的细节没有掌握好啊! 现在根据自己的总结详细的记录下fireEvent方法的使用.fireEvent是IE提供的一种方法,msdn文档地址:http://msdn.microsoft.com/en-us/library/ms536423(v=vs.85).as

  • JavaScript之IE的fireEvent方法详细解析

    在IE中提供了一个fireEvent方法,顾名思义就是触发某个事件发生的意思.刚开始我以为是会跟平时使用onclick()一样,没想到最近在写javascript入门ppt的时候发现了,原来自己太自以为是了!看来还有很多javascript的细节没有掌握好啊! 现在根据自己的总结详细的记录下fireEvent方法的使用.fireEvent是IE提供的一种方法,msdn文档地址:http://msdn.microsoft.com/en-us/library/ms536423(v=vs.85).as

  • python 特殊属性及方法详细解析

    目录 概述 特殊属性 1. _ _ name _ _ 2._ _ bases _ _ 和_ _ base _ _ 以及 _ _ mro _ _ 3._ _ class _ _ 4._ _ dict _ _ 特殊方法 1. _ _ subclasses _ _ () 2._ _ new _ _ (). _ _ init _ _ ()和 _ _ del _ _ () 3._ _ repr _ _ ()和 _ _ str _ _ () 4._ _ call _ _ () 5._ _ lt _ _ ()

  • javascript垃圾收集机制与内存泄漏详细解析

    javascript具有自动垃圾收集机制,也就是说,执行环境会负责管理代码执行过程中的使用的内存.而在C和C++之类的语言中,开发人员的一项基本任务就是手动跟踪内存的使用情况,这是造成许多问题的一个根源.在编写javascript程序时候,开发人员不用再关心内存使用的问题,所需内存的分配 以及无用的回收完全实现了自动管理.这种垃圾收集机制的原理其实很简单:找出那些不再继续使用的变量,然后释放其中占用的内存.为此,垃圾收集器会按照固定的时间间隔(或代码执行中预设的收集时间),周期性的执行这一操作.

  • react-redux中connect()方法详细解析

    组件 React-Redux将所有组件分为两大类:展示组件(UI组件),容器组件 展示组件有以下几个特征: 只负责 UI 的呈现,不带有任何业务逻辑 没有状态(即不使用this.state这个变量) 所有数据都由参数(this.props)提供 不使用任何 Redux 的 API 容器组件有以下几个特征: 负责管理数据和业务逻辑,不负责 UI 的呈现 带有内部状态 使用 Redux 的 API 总结为一点: 展示组件负责 UI 的呈现,容器组件负责管理数据和逻辑 connect方法解析 下图是c

  • C++运算符重载的方法详细解析

    运算符重载实质上是函数的重载 重载运算符的函数一般格式如下: 函数类型    operator  运算符名称    (形参表列) {对运算符的重载处理} 例如,想将"+"用于Complex(复数)的加法运算,函数的原型可以是这样的: 复制代码 代码如下: Complex operator + (Complex & c1,Complex &c2); 其中,operator是关键字,时候专门用于定义重载运算符的函数的,运算符名称就是C++提供给用户的预定运算符. 注意:函数

  • 修改mysql默认字符集的两种方法详细解析

    (1) 最简单的修改方法,就是修改mysql的my.ini文件中的字符集键值,如 default-character-set = utf8    character_set_server = utf8 修改完后,重启mysql的服务,service mysql restart使用 mysql> SHOW VARIABLES LIKE 'character%';查看,发现数据库编码均已改成utf8 复制代码 代码如下: +--------------------------+-----------

  • javascript编码的几个方法详细介绍

    escape定义和用法 escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串. 参数 描述 string 必需.要被转义或编码的字符串. 返回值 已编码的 string 的副本.其中某些字符被替换成了十六进制的转义序列. 说明 该方法不会对 ASCII 字母和数字进行编码,也不会对下面这些 ASCII 标点符号进行编码: * @ - _ + . / .其他所有的字符都会被转义序列替换. 提示和注释 提示:可以使用 unescape() 对 escape() 编码的字符

  • Javascript中各种trim的实现详细解析

    这是lgzx公司的一道面试题,要求给js的String添加一个方法,去除字符串两旁的空白字符(包括空格.制表符.换页符等). 复制代码 代码如下: String.prototype.trim = function() {     //return this.replace(/[(^\s+)(\s+$)]/g,"");//會把字符串中間的空白符也去掉     //return this.replace(/^\s+|\s+$/g,""); //     return t

  • XAMPP安装与使用方法详细解析

    XAMPP 是一个把Apache网页服务器与PHP.Perl及MySQL集合在一起的安装包,允许用户可以在自己的电脑上轻易的建立网页服务器.使用 XAMPP 您可以轻松的在本机调试您的 PHP 程序.CMS以及 wordpress 博客程序.本文主要分享一下 XAMPP 的使用教程. XAMPP 使用方法1.下载 XAMPP 首先下载 XAMPP ,您可以在本页面下方提供的链接直接点入官方网站下载. 2.安装 XAMPP 我使用的是 XAMPP 的 Windows 版的安装包,下载后直接安装即可

  • a2sd+状态下应用程序丢失的解决方法详细解析

    这种情况,十有八九是SD存储卡的ext分区出错了,修复错误后重新开机即可重新启用a2sd+,找回原来安装的应用程序 同修复FAT分区一样,这个可以通过fsck来进行,运行命令从fsck_msdos变更为fsck就行了.不过如果你用的recovery版本有fix SD:ext这个选项的话,直接进入recovery选中修复就行了. 修复后重新启动手机,a2sd+就可以重新启用,空间不再不足,丢失的程序也能找回来了. 另外,容易导致这种问题出现的操作有如下几点需要注意:1.刷机完以后开机之后最好关机然

随机推荐