JavaScript之IE的fireEvent方法详细解析
发布时间:2024-06-05 09:11:28
在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>


猜你喜欢
- javascript中声明函数的方法有两种:函数声明式和函数表达式.区别如下:1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式
- 关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制、判断字符长度 、js限制输入、
- 密码已经是我们生活工作中必不可少的工具,但一个不安全的密码有又有可能会给我们造成不必要的损失。作为网站设计者,如果我们在网页中能对用户输入的
- 简介当前很多网站直接采用第三方认证登录,例如支付宝/微信/ Github 等。goth封装了接入第三方认证的方法,并且内置实现了很多第三方认
- window.onresize = baiduResizeDiv; window.onerror = function(){} var di
- logrus是go的一个日志框架,它最让人激动的应该是hook机制,可以在初始化时为logrus添加hook,logrus可以实现各种扩展功
- Pyppeteer简介Puppeteer 是 Google 基于 Node.js 开发的一个工具,有了它我们可以通过 JavaScript
- MATLAB转格式,需要使用spm package(https://github.com/neurodebian/spm12).%%img2
- SQL(结构化查询语言)就是负责与ANSI维护的数据库交互的标准。最新的版本是SQL-99,还有一个新标准SQL-200n尚处于制定过程中。
- python中日期类datetime功能比较强大,使用起来很方便,把常用的两种用法总结如下:from datetime import dat
- 在写sql的时候,由于有部分语句别名不能调用,百度了一下原因,原来是由于别名机制不同引起的。为了避免下一次再犯同样的错误,今天把网上找到资料
- 前言Tkinter(即 tk interface) 是 Python 标准 GUI 库,简称 “Tk&rdquo
- 从txt种获取数据 并且通过动态曲线显示import numpy as np import matplotlib.pyplot as plt
- 目录一、介绍1.什么是索引?2.为什么要有索引呢?二、索引的原理一 索引原理二 磁盘IO与预读三、索引的数据结构四、Mysql索引管理一、功
- 前言如果你之前没用过进度条,八成是觉得它会增加不必要的复杂性或者很难维护,其实不然。要加一个进度条其实只需要几行代码。from alive_
- Asp定时执行操作、Asp定时读取数据库(网页定时操作详解)'----------------------版权信息---------
- 之前我给粉丝们搞过个投票,寻找MySQL中那个最熟悉的陌生人~~MySQL中哪些技术点是你既熟悉又陌生的?前三名和我预料大差不差,分别是
- 如下所示:<!doctype html><html lang="en"> <head>
- 1.获取远程包go 语言有一个获取远程包的工具就是 go get,目前 go get 支持多数开源社区 (例如:github、googlec
- 最近开始在项目中使用Quickwork For Asp,虽然该框架是自己独立完成的,不过功能没做过详细的总结,所以很多参数总是会弄错,毕竟鱼