快捷導航

IE的fireEvent方法概述及應用

更新時間：2013年02月22日 15:59:36 作者：

IE中提供了一個fireEvent方法大概就是觸發(fā)某個事件發(fā)生的意思，以為是和onclick()一樣，看來是我自已為是了,有時間還要多看看javascript的細節(jié)啊,廣大網(wǎng)友也是啊

在IE中提供了一個fireEvent方法，顧名思義就是觸發(fā)某個事件發(fā)生的意思。剛開始我以為是會跟平時使用onclick()一樣，沒想到最近在寫javascript入門ppt的時候發(fā)現(xiàn)了，原來自己太自以為是了！看來還有很多javascript的細節(jié)沒有掌握好??！

現(xiàn)在根據(jù)自己的總結(jié)詳細的記錄下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會觸發(fā)onclick事件，但是ul的onclick沒有觸發(fā)，這就表明了DOM.onclick()不存在冒泡。
fireEvent()
我們來看看fireEvent跟onclick()觸發(fā)事件是否相同?？聪旅娴拇a：

復制代碼代碼如下:

 
<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后，觸發(fā)ul的onclick事件，說明fireEvent會引起冒泡，而且沒有發(fā)生像onclick()提示“對象不支持此屬性或方法”，說明即使不添加id1的onclick事件也可以冒泡。
由此可以看出，IE中的fireEvent方法類似模擬用戶的鼠標點擊行為，而不是單純的onclick。

總結(jié)fireEvent和onclick區(qū)別
通過上面的例子可以看出，DOM的fireEvent和onclick（這只是個代表）有以下區(qū)別：
1.onclick需要DOM真正添加了onclick事件，否則會報“對象不支持此屬性或方法”錯誤
2.onclick不會引起IE的冒泡過程，而fireEvent會引起冒泡，fireEvent更貼近用戶真實的行為觸發(fā)
3.由第二條得出，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> 

您可能感興趣的文章: