IE的fireEvent方法和Firefox下实现fireEvent

最新推荐文章于 2021-07-20 16:35:38 发布

AllinShang

最新推荐文章于 2021-07-20 16:35:38 发布

阅读量4.3k

点赞数

分类专栏： WEB前端开发 javascript 文章标签： ie firefox javascript button generator html

WEB前端开发同时被 2 个专栏收录

103 篇文章 0 订阅

订阅专栏

javascript

24 篇文章 0 订阅

订阅专栏

IE的fireEvent方法
转自： http://www.js8.in/731.html

在IE中提供了一个fireEvent方法，顾名思义就是触发某个事件发生的意思。刚开始我以为是会跟平时使用onclick()一样，没想到最近在写javascript入门ppt的时候发现了，原来自己太自以为是了！看来还有很多javascript的细节没有掌握好啊！

现在根据自己的总结详细的记录下fireEvent方法的使用。fireEvent是IE提供的一种方法，msdn文档地址：http://msdn.microsoft.com/en-us/library/ms536423(v=vs.85).aspx

onclick()

我们先看第一段实例代码：

<ul οnclick='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 οnclick='document.getElementById("id1").onclick();'>click me!</button>

这段代码中我们没有个id1的li添加onclick事件，点击button，会报错，提示“对象不支持此属性或方法”。由此可见，DOM.onclick()需要添加onclick事件之后才能使用。

假如我们把以上的代码修改为：

<ul οnclick='alert(event.srcElement.innerHTML);'>
	<li id='id1' οnclick='alert(1);'>i am one;</li>
	<li id='id2'>i am two;</li>
	<li id='id3'>i am three;</li>
</ul>
<button οnclick='document.getElementById("id1").onclick();'>click me!</button>

此时，点击button会触发onclick事件，但是ul的onclick没有触发，这就表明了DOM.onclick()不存在冒泡。

fireEvent()

我们来看看fireEvent跟onclick()触发事件是否相同。看下面的代码：

<ul οnclick='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 οnclick='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 οnclick='alert(event.srcElement.innerHTML);'>
	<li id='id1' οnclick='alert(1);'>i am one;</li>
	<li id='id2'>i am two;</li>
	<li id='id3'>i am three;</li>
</ul>
<button οnclick='document.getElementById("id1").onclick();'>click me!</button>
<button οnclick='document.getElementById("id1").fireEvent("onclick")'>fireEvent !</button>

Firefox下实现fireEvent

转自： http://www.cnblogs.com/mxw09/archive/2010/08/10/1796955.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document  </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<select onchange="javascript:alert('a');" id="select1"> <option>1 </option> <option>2 </option> </select>
<INPUT TYPE="button" onclick="ccc()">
    <script type="text/javascript">
    //<![CDATA[
function ccc(){
var t=document.getElementById('select1')
 if(   document.all   )  
  {  
          t.fireEvent(   "onchange"   );  
  }  
  else  
  {  
          var   evt   =   document.createEvent('HTMLEvents');  
          evt.initEvent('change',true,true);  
          t.dispatchEvent(   evt   );  
  }
}

//javascript:document.getElementById('select1').fireEvent('onchange');
 
    //]]>
 </script>
</BODY>
</HTML>

AllinShang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE的fireEvent方法和Firefox下实现fireEvent

IE的fireEvent方法转自：http://www.js8.in/731.html在IE中提供了一个fireEvent方法，顾名思义就是触发某个事件发生的意思。刚开始我以为是会跟平时使用onclick()一样，没想到最近在写javascript入门ppt的时候
复制链接

扫一扫