document.forms[0].onsubmit 和 jQuery("form").submit 之间的区别答案

【问题标题】：difference between document.forms[0].onsubmit and jQuery("form").submitdocument.forms[0].onsubmit 和 jQuery("form").submit 之间的区别
【发布时间】：2012-01-09 18:53:43
【问题描述】：

为什么#1 被调用时__doPostback（这个动态JavaScript 函数在HTML 呈现时由ASP.NET 自动创建。我想是在打开事件验证时）被调用，但#2 没有被调用叫。然而，当一个按钮被点击时，两者都会被调用？

#1

document.forms[0].onsubmit =
     function() {
     alert("called submit 1");
     jQuery("#<%=DDLUCSAddress.ClientID %>").children("option").each(function() {
     jQuery(this).remove();
   });
 };

#2

jQuery("form").submit(function() {
    alert("called submit 2");
    jQuery("#<%=DDLUCSAddress.ClientID %>").children("option").each(function() {
            jQuery(this).remove();
    });
});

渲染的 HTML - 如果我对此代码执行 Ctrl+K+D，由于空格，它会超出 Stack Overflow 的字符限制。如果您想查看它的格式，请放入 Visual Studio 并按Ctrl+K+D

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<body>
<div id="sessionRefresh" style="display:none">
<script language="JavaScript" type="text/javascript" />
<form id="Form1" onsubmit="javascript:return WebForm_OnSubmit();" action="EditSampleDetails.aspx?LabAccessioningNumber=20120401-1&SampleTypeContext=247" method="post" name="Form1">
<div>
<script type="text/javascript" />
<script type="text/javascript" src="/WebResource.axd?d=EXaDJPTWpPG72bTbiKNh_OuYVox46idcF5L2FHTyi19FoknASLIR-iSOhjjdC3Xa0OCTSAQepXg5UpNN1TPkcREtvcQ1&t=634208598757546466" />
<script type="text/javascript" language="javascript" />
<script type="text/javascript" src="/WebResource.axd?d=4scrxOSLDbM-cgeLoXFnrTxM83c-T6NjCtRi_ghVZlXN0qjfjwNCtjtRWczFgkWux80g8Ip0p9JqPBJcPSlcT3N25CA1&t=634208598757546466" />
<script type="text/javascript" />
<div>
<div id="mainMenu" class="droplinetabs">
<table cellspacing="0" cellpadding="0" border="0">
<table class="uIBoxStacked" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<tr>
<td class="uIBoxInternal" colspan="2">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>
<div id="BxWizardTitle" style="border-color:LightSteelBlue;width:100%;">
<a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00", "", true, "", "", false, true))'></a>
<a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl01", "", true, "", "", false, true))'></a>
<a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl02", "", true, "", "", false, true))'></a>
<a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl03", "", true, "", "", false, true))'></a>
<table cellspacing="0" cellpadding="0" style="border-width:0px;">
<tbody>
<tr>
<td class="leftNavigationCell" style="vertical-align:top;">
<td>
<td valign="top">
<table cellpadding="5">
<tbody>
<tr>
<tr>
<td>
<table cellpadding="5">
<tbody>
<tr>
<tr>
<tr>
<td>
<script type="text/javascript" />
<table class="uIBoxStacked" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<tr>
<td class="uIBoxInternal" colspan="2">
<table class="outerTableOfInputs" width="100%" cellspacing="0">
<tbody>
<tr>
<td>
<table class="tableOfInputs" width="100%" cellspacing="0">
<tbody>
<tr>
<td>
<div id="FullDataEntryEditor_UIBSampleInfo" style="border-color:LightSteelBlue;width:100%;">
<a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("FullDataEntryEditor$ctl00", "", true, "", "", false, true))'></a>
<a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("FullDataEntryEditor$ctl01", "", true, "", "", false, true))'></a>
<a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("FullDataEntryEditor$ctl02", "", true, "", "", false, true))'></a>
<a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("FullDataEntryEditor$ctl03", "", true, "", "", false, true))'></a>

<table>
<script type="text/javascript" />
<tbody>
<tr>
<tr>
<tr>
<tr>
<td>Additional Client Number</td>
<td>
<input id="FullDataEntryEditor_TxtAdditionalClientNumber" class="LIMSFormField" type="text" autocomplete="off" name="FullDataEntryEditor$TxtAdditionalClientNumber">
</td>
</tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="saveCancelDeleteOuter" width="100%" cellspacing="0">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>
<input id="EditObjectId986257676" type="hidden" value="" name="EditObjectId986257676">
<input id="CommandName986257676" type="hidden" value="" name="CommandName986257676">
<table class="uIBoxStacked" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<tr>
<tr>
<td class="uIBoxInternal" colspan="2">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>
<div id="FullDataEntryEditor_NMNotes_List_ListBox" style="border-color:LightSteelBlue;width:100%;">
<a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("FullDataEntryEditor$NMNotes$List$ctl00", "", true, "", "", false, true))'></a>
<a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("FullDataEntryEditor$NMNotes$List$ctl01", "", true, "", "", false, true))'></a>
<a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("FullDataEntryEditor$NMNotes$List$ctl02", "", true, "", "", false, true))'></a>
<a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("FullDataEntryEditor$NMNotes$List$ctl03", "", true, "", "", false, true))'></a>
<table id="FullDataEntryEditor_NMNotes_List_ListGrid" cellspacing="0" cellpadding="4" border="1" style="width:100%;border-collapse:collapse;" rules="all">
<tbody>
<tr class="columnHeader">
<tr style="background-color:Yellow;">
<td>
<a href="javascript:listCustomPostback(986257676,'Edit',129285);">bbbbbbbbbbbbbb</a>
</td>
<td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div id="pdfDisplay"></div>
<script language="javascript" type="text/javascript" />
</td>
</tr>
<tr>
</tbody>
</table>
<script type="text/javascript" />
<input id="FullDataEntryEditor_HiddenSampleType" type="hidden" value="247" name="FullDataEntryEditor$HiddenSampleType">
<input id="FullDataEntryEditor_HiddenAJAXUCSAddressValue" type="hidden" value="7533" name="FullDataEntryEditor$HiddenAJAXUCSAddressValue">
<input id="FullDataEntryEditor_HiddenAJAXUCSAddressText" type="hidden" value="[7533] A1's Primary address, a1_primary_address, madison wi, usa 53719" name="FullDataEntryEditor$HiddenAJAXUCSAddressText">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="saveCancelDeleteOuter" width="100%" cellspacing="0">
<script type="text/javascript" />
<script type="text/javascript" />
<script type="text/javascript" />
</form>
<table class="copyright" align="center">
</body>
</html>

【问题讨论】：

标签： jquery forms submit document invoke

【解决方案1】：

第一个document.forms[0].onsubmit 不是jQuery。它分配给文档中的第一个表单。如果您单击第一个表单上的提交按钮，它将被触发
第二个jQuery("form").submit 是jQuery，但已分配给文档上的所有forms。如果您单击文档中每个表单上的提交按钮，它就会被触发

【讨论】：

如果jQuery("form") 分配给所有表单，为什么在调用__doPostback 时不调用它？
请提供更多源代码。因为我们需要知道javascript源放在哪里。

【解决方案2】：

__doPostback 执行以下操作：

theform.onsubmit();

这是获取onsubmit 属性的值并执行它。使用 jquery 附加的提交处理程序未设置为元素的属性，因此完成后它们不会触发。

编辑：

jQuery 源码中的相关代码：

if ( elem.addEventListener ) {
    elem.addEventListener( type, eventHandle, false );
} else if ( elem.attachEvent ) {
    elem.attachEvent( "on" + type, eventHandle );
}

这是 jquery 附加其事件的方式，而不是使用 onsubmit 属性。

【讨论】：

感谢您的解释！有没有办法让 jQuery 在调用 __doPostback 时触发事件？
不能直接在jquery对象上设置onsubmit，需要在dom元素上设置。所以你可以做jQuery("form")[0].onsubmit。但如果这就是你所做的一切，为什么不跳过那部分的 jquery。