JavaScript之IE的fireEvent方法详细解析

JavaScript之IE的fireEvent方法详细解析

作者： 字体：[增加 减小] 类型：转载 时间：2013-11-20 我要评论

刚开始我以为是会跟平时使用onclick()一样，没想到最近在写javascript入门ppt的时候发现了，原来自己太自以为是了！看来还有很多javascript的细节没有掌握好啊

id="iframeu2261530_0" src="http://pos.baidu.com/acom?sz=680x200&rdid=2261530&dc=2&di=u2261530&dri=0&dis=0&dai=2&ps=418x46&coa=at%3D3%26rsi0%3D680%26rsi1%3D200%26pat%3D6%26tn%3DbaiduCustNativeAD%26rss1%3D%2523FFFFFF%26conBW%3D1%26adp%3D1%26ptt%3D0%26titFF%3D%2525E5%2525BE%2525AE%2525E8%2525BD%2525AF%2525E9%25259B%252585%2525E9%2525BB%252591%26titFS%3D14%26rss2%3D%2523000000%26titSU%3D0%26ptbg%3D90%26piw%3D0%26pih%3D0%26ptp%3D0&dcb=BAIDU_UNION_define&dtm=BAIDU_DUP_SETJSONADSLOT&dvi=0.0&dci=-1&dpt=none&tsr=0&tpr=1456295302421&ti=JavaScript%E4%B9%8BIE%E7%9A%84fireEvent%E6%96%B9%E6%B3%95%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90_javascript%E6%8A%80%E5%B7%A7_%E8%84%9A%E6%9C%AC%E4%B9%8B%E5%AE%B6&ari=1&dbv=2&drs=1&pcs=1083x574&pss=1083x424&cfv=0&cpl=4&chi=1&cce=true&cec=GBK&tlm=1454002880&ltu=http%3A%2F%2Fwww.jb51.net%2Farticle%2F43467.htm&ltr=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DnNjAfCk8Uiy4OiBQNjDh6gTkccPz4e5BGDPod3_HFYkKAwumBsvmaGH6tNj6JScJ%26wd%3D%26eqid%3De34f16f1000042cc0000000556cd4d30&ecd=1&psr=1366x768&par=1366x728&pis=-1x-1&ccd=24&cja=false&cmi=6&col=zh-CN&cdo=-1&tcn=1456295302&qn=1399dc1ae673dcce&tt=1456295302402.67.170.171" width="680" height="200" align="center,center" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="display: block; border-width: 0px; border-style: initial; vertical-align: bottom; margin: 0px;">

在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>