1.探究html的button 的 onclick和onserverclick；
2.探究aspbutton的 OnClick和OnClientClick
打开VS，新建空项目，添加web窗体WebForm1 .
在form段添加一个html input button 和 一个 asp button
代码如下：
<input id="HtmlBtn" type="button" value="Html" />
<asp:Button ID="AspBtn" runat="server" Text="Asp" />
html input button实验
1.在head段添加一个js方法，代码如下
<script>
function jsShow() {
alert("jsShow");
}
</script>
给HtmlBtn绑定jsShow方法
<input id="HtmlBtn" type="button" value="Html" οnclick="jsShow()" />
运行一下。
运行结果为： 点击HtmlBtn时，弹出 “jsShow” 。
分析：嗯。。js方法调用成功了
2.
添加后台方法
protected void HtmlBtn_Click(object sender,EventArgs e)
{
Response.Write("<script>alert('HtmlBtn_Click')</script>");
}
改变HtmlBtn的代码
<input id="HtmlBtn" type="button" value="Html" οnclick="HtmlBtn_Click" />
运行一下。
运行结果为：点击HtmlBtn，无任何反应。
分析：HtmlBtn直接绑定后台方法是无效的。
3.
给HtmlBtn添加runat
<input id="HtmlBtn" runat="server" type="button" value="Html" οnclick="HtmlBtn_Click" />
运行一下。
运行结果为：点击HtmlBtn，无任何反应。
分析：HtmlBtn 添加runat=server后，onclick绑定后台方法是无效的。
4.
HtmlBtn的onclick 换成 onserverclick
<input id="HtmlBtn" runat="server" type="button" value="Html" onserverclick="HtmlBtn_Click" />
运行一下。
运行结果为：点击HtmlBtn，弹窗显示“HtmlBtn_Click”
分析：HtmlBtn 添加runat=server后，虽然onclick绑定后台方法无效，但是onserverclick绑定的后台方法有效
5.
在4的基础上，给HtmlBtn 的 onclick绑定js
<input id="HtmlBtn" runat="server" type="button" value="Html" οnclick="jsShow()" onserverclick="HtmlBtn_Click" />
运行一下。
运行结果为：点击HtmlBtn，无任何反应。
分析：HtmlBtn 添加runat=server后，同时绑定onclick和onserverclick时，两个都失效。
6.
在5的基础上，去掉onserverclick
<input id="HtmlBtn" runat="server" type="button" value="Html" οnclick="jsShow()" />
运行一下。
运行结果为：点击HtmlBtn，弹窗“jsShow”。
分析：HtmlBtn 添加runat=server后，单独onclick绑定js后，js函数会 执行，且在运行期间，浏览器查看源码时，发现此按钮上没有runat=server的属性。浏览器忽略了？？
7.
在6的基础上，去掉runat ，重新绑定onserverclick
<input id="HtmlBtn" type="button" value="Html" οnclick="jsShow()" onserverclick="HtmlBtn_Click"/>
运行一下。
运行结果为：点击HtmlBtn，弹窗“jsShow”。
分析：HtmlBtn 无runat=server时，只会执行onclick的js方法。
总结：htmlBtn，可以单独执行js或者单独执行后台代码，但貌似不能onclick和onserverclick都执行？？ asp button实验
1.
AspBtn OnClick绑定后台方法
<asp:Button ID="AspBtn" runat="server" Text="Asp" OnClick="HtmlBtn_Click"/>
运行一下。
运行结果为：点击AspBtn，弹窗“HtmlBtn_Click”。
分析：AspBtn OnClick直接绑定后台方法，可以执行。
2.
在1的基础上，添加OnClientClick绑定js
<asp:Button ID="AspBtn" runat="server" Text="Asp" OnClick="HtmlBtn_Click" OnClientClick="jsShow()"/>
运行一下。
运行结果为：点击AspBtn，先弹窗“jsShow”，后弹窗“HtmlBtn_Click”。
分析：AspBtn的OnClick绑定后台方法，同时OnClientClick绑定js时，两者都会执行，且先执行js，后执行后台方法。
3.
在2的基础上，去掉后台方法的绑定
<asp:Button ID="AspBtn" runat="server" Text="Asp" OnClientClick="jsShow()"/>
运行一下。
运行结果为：点击AspBtn，弹窗“jsShow”
分析：AspBtn可以单独给OnClientClick绑定js，可执行。
4.
在3的基础上，去掉runat
结果直接提示 asp：Button缺少必要的字段runat。。。
总结：AspButton，可以单独使用OnClientClick执行js，也可以单独使用OnClick执行后台方法，还可以两个都使用，这时候会先执行js，后执行后台方法。
补充：如果在Webform中，进行前台验证再来决定是否执行后台事件，当前端控件绑定了两个点击事件，
OnClick="Button1_Click" OnClientClick=""
如果前端验证不通过就不执行后台点击事件的情况下，我们在前端的js方法中需要return false;并且OnClientClick="return Search();"这样的话前端执行不通过就不会执行后台事件了。
---------------------
作者：Fanstorm丶
来源：CSDN
原文：/wf824284257/article/details/75799140
