DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> IE的fireEvent方法概述及應用
IE的fireEvent方法概述及應用
編輯:關於JavaScript     
在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(這只是個代表)有以下區別:
1.onclick需要DOM真正添加了onclick事件,否則會報“對象不支持此屬性或方法”錯誤
2.onclick不會引起IE的冒泡過程,而fireEvent會引起冒泡,fireEvent更貼近用戶真實的行為觸發
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>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved