ASP.NET __doPostBack 中 onsubmit 與 onsubmit() 差異解析

程式碼出處

ASP.NET WebForms 自動生成的客戶端腳本，負責處理 `` 等控件的 PostBack 流程。

代碼逐行解析

function _doPostBack(eventTarget, eventArgument) {
    // 1. theForm = document.forms[0] (頁面唯一 form)
    // 2. onsubmit = theForm.onsubmit (取得 onsubmit 事件處理器引用)
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        // 3. !theForm.onsubmit → 沒有綁定 onsubmit 事件
        // 4. theForm.onsubmit() → **呼叫** onsubmit 處理器，取得返回值
        // 5. != false → 返回值不為 false (true/undefined/null 都繼續)
        
        theForm._EVENTTARGET.value = eventTarget;
        theForm._EVENTARGUMENT.value = eventArgument;
        theForm.submit(); // 真正提交表單
    }
}

關鍵差異對照表

HTML 對應關係

<form id="form1" runat="server" onsubmit="return validateForm();">
    <asp:Button Text="提交" />
</form>

<script>
function validateForm() {
    if ($('#txtName').val() === '') {
        alert('姓名必填');
        return false; // 阻止提交
    }
    return true; // 允許提交
}
</script>

執行流程圖解

使用者點擊 Button
        ↓
__doPostBack('btnSubmit', '')
        ↓
檢查 theForm.onsubmit 存在嗎？ → 否 → 直接 submit()
        ↓ 是
呼叫 theForm.onsubmit() → validateForm()
        ↓
返回 false？ → 是 → 阻止提交，結束
        ↓ 否
設置 __EVENTTARGET / __EVENTARGUMENT
        ↓
theForm.submit() → 瀏覽器原生提交 → 頁面 PostBack

常見誤區

• ❌ 以為 `onsubmit` 是屬性值 → 實際是 DOM 0 級事件處理器屬性
• ❌ 以為 `return false` 在 jQuery `.submit()` 中生效 → 需用 `e.preventDefault()`
• ❌ 直接覆蓋 `form.onsubmit = ...` → 會覆蓋 ASP.NET 內部邏輯，**應用 `addEventListener`**

正確攔截提交的現代寫法

document.getElementById('form1').addEventListener('submit', function(e) {
    if (!validateForm()) {
        e.preventDefault(); // 阻止提交
        return false;
    }
    // 允許提交，ASP.NET _doPostBack 繼續執行
});

總結

• onsubmit (無括號) = **取得函數引用**，用於判斷是否存在
• onsubmit() (有括號) = **執行函數**，用於取得驗證結果
• ASP.NET 這段代碼體現了「防禦性程式設計」：先檢查存在性，再呼叫，最後判斷返回值