webform中前端页面的绑定点击事件onclick触发和后台绑定Click的执行顺序

1.探究html的button 的 onclick和onserverclick；

2.探究aspbutton的 OnClick和OnClientClick

打开VS，新建asp.net空项目，添加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 
原文：https://blog.csdn.net/wf824284257/article/details/75799140