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

(0)

相关推荐

  • 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

  • IE的fireEvent方法概述及应用

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

  • Android中bindService基本使用方法概述

    Android中有两种主要方式使用Service,通过调用Context的startService方法或调用Context的bindService方法,本文只探讨纯bindService的使用,不涉及任何startService方法调用的情况.如果想了解startService相关的使用,请参见<Android中startService基本使用方法概述>. bindService启动服务的特点 相比于用startService启动的Service,bindService启动的服务具有如下特点:

  • Android中startService基本使用方法概述

    Android中有两种主要方式使用Service,通过调用Context的startService方法或调用Context的bindService方法,本文只探讨纯startService的使用,不涉及任何bindService方法调用的情况.如果想了解bindService的相关使用,请参见<Android中bindService基本使用方法概述>. 当我们通过调用了Context的startService方法后,我们便启动了Service,通过startService方法启动的Servic

  • Android中Socket通信的实现方法概述

    本文实例简述了Android中Socket通信的实现方法,具体内容如下: 一.socket通信概述 通俗的来说套接字(socket)是通信的基石,是支持TCP/IP协议的网络通信的基本操作单元.它是网络通信过程中端点的抽象表示,包含进行网络通信必须的五种信息:连接使用的协议,本地主机的IP地址,本地进程的协议端口,远地主机的IP地址,远地进程的协议端口. 应用层通过传输层进行数据通信时,TCP会遇到同时为多个应用程序进程提供并发服务的问题.多个TCP连接或多个应用程序进程可能需要通过同一个TCP

  • Egg框架的功能、原理,以及基本使用方法概述 原创

    概述 Egg是一款基于Koa框架的企业级Node.js框架,其主要目标是帮助团队和开发者快速构建可维护和易扩展的应用程序. Egg框架的主要功能包括: 1. 基于Koa框架,提供了丰富的插件机制,可以轻松集成常用的中间件和工具.2. 支持异步编程,通过Promises和async/await来实现流程控制.3. 开箱即用的配置加载和覆盖能力,可根据环境变量自动切换不同的配置.4. 内置路由系统,支持URL参数,RESTful风格的API设计.5. 完善的插件生态系统,涵盖了日志.数据库.缓存等各

  • JQuery入门——移除绑定事件unbind方法概述及应用

    1.在DOM对象的实践操作中,既然存在用于绑定事件的bind方法,也相应存在用于移出绑定事件的方法,在JQuery中,可以通过unbind方法移除所有绑定的事件或某一个事件. 2.示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • ThinkPHP页面跳转success与error方法概述

    ThinkPHP自身提供了success方法与error方法用于实现带提示信息的页面跳转功能,可实现添加数据后显示提示信息并跳转的效果.success 方法用于操作成功后的提示,error 用于操作失败后的提示,二者使用方法完全一致,下面以success 方法来进行说明. 1.success方法   success方法语法如下: success(message, ajax)  参数说明message可选.页面提示信息.ajax可选.是否AJAX 方式提交,默认为false . 如果是AJAX 方

  • ThinkPHP实例化模型的四种方法概述

    本文讲述了ThinkPHP实例化模型的四种方法,对于ThinkPHP程序设计来说有非常重要的应用.具体如下: 1.创建一个基础模型:实例化一个系统自带的数据库操作类 Test.Model.class.php页面代码如下: class TestModel extends Model{ } UserAction.class.php页面代码如下: function test(){ $test=M('test');//表示实例化的是自带的Model类,并且传入test值表示操作的是test表 //等同于

  • VC中使用GDI+的配置方法概述

    本文以Visual C++ 6.0及Visual Studio 2003为例简述了VC中GDI的配置方法,具体操作如下: 一.对于Visual C++ 6.0的用户: 1. 下载GDI+的库.运行GDI+需要一个GdiPlus.dll的文件; 开发GDI+的程序,还需要GdiPlus.lib和GdiPlus*.h文件.这些都可以在微软的网站上下到.(具体搜一下windows sdk就都出来了) 2. 将以上的文件放在你的工程中的一个目录,然后在stdafx.h中包含#include "GdiPl

随机推荐