js類比點擊事件實現代碼

html:

複製代碼 代碼如下:
<h3>請單擊“提交”，測試提交按鈕的單擊事件也被觸發了。</h3>
<button id="btn">提交</button>
<form action="#" method="get" id="form">
<input type="text" name="site" value="www.woiweb.net" readonly/>
<input id="subbtn" type="submit" value="先別點擊此按鈕提交" onclick="alert('我已經提交了');"/>
</form>

Javscript:

複製代碼 代碼如下:
<script type="text/javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//通用方法
btn.onclick = function() {
sub.click();
}
</script>

經過測試，IE，FF，Chrome，Opera，Safari都沒有問題，均可正常提交表單。

但在實際的設計中，為了讓提交按鈕更好看，buildder經常把它們用a標籤來處理，加個背景圖片來類比按鈕，我們仍然用上面的思路來嘗試，增加一個a標籤，讓它來提交表單，我們僅修改html。

Html:
複製代碼 代碼如下:
<h3>請單擊“提交”，測試提交按鈕的單擊事件也被觸發了。</h3>
<button id="btn">提交</button>
<form action="#" method="get" id="form">
<input type="text" name="site" value="www.woiweb.net" readonly/>
<!--<input id="subbtn" type="submit" value="先別點擊此按鈕提交" onclick="alert('我已經提交了');"/> -->
<a id="subbtn" href="javascript:;" onclick="alert('在此調用提交表單的方法')">類比提交按鈕</a>
</form>

javascript:

複製代碼 代碼如下:
<script type="text/javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//通用方法
btn.onclick = function() {
sub.click();
}
</script>


運行後，問題出現了，IE、FF、Opera均OK，但Chrome和Safari不能正常運行，後來網上搜尋了下，發現a標籤並不是和按鈕一樣有onclick()事件的，解決辦法是針對 IE 和 FF編寫不同的邏輯，JS代碼如下：
javascript:
複製代碼 代碼如下:
<script type="text/javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//通用方法
btn.onclick = function() {
//sub.click();
if (/msie/i.test(navigator.userAgent)) //IE
{
sub.fireEvent("onclick");
} else {
var e = document.createEvent('MouseEvent');
e.initEvent('click', false, false);
sub.dispatchEvent(e);
}
}
</script>

至此，問題解決，雖然這個問題很簡單，但很容易被大家忽略，貼出來和大家一起分享。

文法： 
createEvent(eventType)

參數	描述
eventType	想擷取的 Event 對象的事件模組名。關於有效事件類型列表，請參閱”說明”部分。

傳回值

返回新建立的 Event 對象，具有指定的類型。

拋出

如果實現支援需要的事件類型，該方法將拋出代碼為 NOT_SUPPORTED_ERR 的 DOMException 異常。

說明

該方法將建立一種新的事件類型，該類型由參數 eventType 指定。注意，該參數的值不是要建立的事件介面的名稱，而是定義那個介面的 DOM 模組的名稱。

下表列出了 eventType 的合法值和每個值建立的事件介面：

參數	事件介面	初始化方法
HTMLEvents	HTMLEvent	iniEvent()
MouseEvents	MouseEvent	iniMouseEvent()
UIEvents	UIEvent	iniUIEvent()

用該方法建立了 Event 對象以後，必須用上表中所示的初始化方法初始化對象。關於初始化方法的詳細資料，請參閱 Event 對象參考。

該方法實際上不是由 Document 介面定義的，而是由 DocumentEvent 介面定義的。如果一個實現支援 Event 模組，那麼 Document 對象就會實現 DocumentEvent 介面並支援該方法。