html button 和 asp button的 各种click事件

实验目的

探究html的button 的 onclick和onserverclick；

探究aspbutton的 OnClick和OnClientClick；

背景前言

嗯，做网页的时候button的click事件，很基础的东西吧，可是很多时候需要用到了，却搞不清它们之间的关系，很让人头疼。所以笔者今天就将html 的input button 的onclick和onserverclick以及asp button的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" onclick="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" onclick="HtmlBtn_Click" />

运行一下。

运行结果为：点击HtmlBtn，无任何反应。

分析：HtmlBtn直接绑定后台方法是无效的。

3.

给HtmlBtn添加runat

<input id="HtmlBtn" runat="server" type="button" value="Html" onclick="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" onclick="jsShow()" onserverclick="HtmlBtn_Click" />

运行一下。

运行结果为：点击HtmlBtn，无任何反应。

分析：HtmlBtn 添加runat=server后，同时绑定onclick和onserverclick时，两个都失效。

6.

在5的基础上，去掉onserverclick

<input id="HtmlBtn" runat="server" type="button" value="Html" onclick="jsShow()" />

运行一下。

运行结果为：点击HtmlBtn，弹窗“jsShow”。

分析：HtmlBtn 添加runat=server后，单独onclick绑定js后，js函数会 执行，且在运行期间，浏览器查看源码时，发现此按钮上没有runat=server的属性。浏览器忽略了？？

7.

在6的基础上，去掉runat ，重新绑定onserverclick

<input id="HtmlBtn" type="button" value="Html" onclick="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，后执行后台方法。

若有错误，还请大家不吝赐教啦！