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>

标签:fireEvent
0
投稿

猜你喜欢

  • Python 多线程处理任务实例

    2021-06-25 04:50:05
  • Python+selenium实现自动循环扔QQ邮箱漂流瓶

    2021-07-12 23:46:28
  • PyCharm Community安装与配置的详细教程

    2022-05-03 18:20:40
  • Python实现自动添加脚本头信息的示例代码

    2022-07-02 18:12:42
  • 用好FrontPage2003的九大功能

    2008-02-21 14:29:00
  • rs.open sql,conn,1,1与rs.open sql,conn,1.3还有rs.open sql,conn,3,2区别

    2011-02-24 10:49:00
  • 浅谈javascript中关于日期和时间的基础知识

    2024-04-19 09:45:56
  • Laravel框架执行原生SQL语句及使用paginate分页的方法

    2023-11-24 00:27:24
  • Python 数字转化成列表详情

    2023-09-24 06:53:25
  • 一篇文章搞懂:词法作用域、动态作用域、回调函数及闭包

    2022-10-01 00:21:05
  • 详解numpy矩阵的创建与数据类型

    2022-07-12 15:59:17
  • 程序员趣味读物 谈谈Unicode编码

    2023-03-19 14:56:13
  • IE和Firefox下event事件杂谈

    2024-04-22 13:25:33
  • 用ASP+XML打造留言本实例

    2007-08-13 10:38:00
  • django admin组件使用方法详解

    2021-05-28 19:59:53
  • ChatGPT与Remix Api服务在浏览器url地址中对话详解

    2023-06-23 12:35:50
  • 谈谈CSS样式表的命名规范

    2007-10-08 12:41:00
  • 使用Visual Studio 2022开发前端的详细教程

    2023-07-02 05:30:35
  • 可能是最通俗的一篇介绍markdown的文章

    2022-08-09 09:48:43
  • JS+ASP实现无刷新新闻列表之分页

    2007-08-22 12:57:00
  • asp之家 网络编程 m.aspxhome.com