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>
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python 多线程处理任务实例
Python+selenium实现自动循环扔QQ邮箱漂流瓶
PyCharm Community安装与配置的详细教程
![](https://img.aspxhome.com/file/2023/3/81813_0s.png)
Python实现自动添加脚本头信息的示例代码
用好FrontPage2003的九大功能
![](https://img.aspxhome.com/file/UploadPic/20082/21/2008221143234106s.jpg)
rs.open sql,conn,1,1与rs.open sql,conn,1.3还有rs.open sql,conn,3,2区别
浅谈javascript中关于日期和时间的基础知识
Laravel框架执行原生SQL语句及使用paginate分页的方法
Python 数字转化成列表详情
![](https://img.aspxhome.com/file/2023/3/67373_0s.png)
一篇文章搞懂:词法作用域、动态作用域、回调函数及闭包
![](https://img.aspxhome.com/file/2023/4/64994_0s.png)
详解numpy矩阵的创建与数据类型
![](https://img.aspxhome.com/file/2023/5/96955_0s.png)
程序员趣味读物 谈谈Unicode编码
IE和Firefox下event事件杂谈
用ASP+XML打造留言本实例
django admin组件使用方法详解
ChatGPT与Remix Api服务在浏览器url地址中对话详解
![](https://img.aspxhome.com/file/2023/5/131865_0s.jpg)
谈谈CSS样式表的命名规范
使用Visual Studio 2022开发前端的详细教程
![](https://img.aspxhome.com/file/2023/5/137075_0s.png)
可能是最通俗的一篇介绍markdown的文章
![](https://img.aspxhome.com/file/2023/2/131862_0s.png)