html button 和 asp button的 各种click事件
来源:互联网 发布:ios 跳转到淘宝客户端 编辑:程序博客网 时间:2024/05/21 11:28
实验目的
探究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,后执行后台方法。
若有错误,还请大家不吝赐教啦!
- html button 和 asp button的 各种click事件
- Extjs Button控件的handler配置项和click事件
- C#委托和事件的实例(button click)
- Button Click事件追踪
- JSP处理BUTTON的CLICK事件
- asp:Button 事件,点击事件 html Button runat="sever"
- 模拟调用Button Click事件
- Android Button click 事件监听
- html 按Enter后,自动触发指定button的click事件 在谷歌好用
- Button和Button事件的简单应用
- HTML: button和input button的区别
- HTML: button和input button的区别
- Item的click事件和Item里的button等子控件的click事件同时生效的解决办法
- ListView—Item的click事件和Item里的button等子控件的click事件同时生效的解决办法
- Item的click事件和Item里的button等子控件的click事件冲突的解决办法
- button的click事件触发的提交问题
- Drupal ajax html和bootstrap dropdown button的事件机制
- 如何用JavaScript去触发Button的Click事件
- Android图形显示系统——概述
- 文件权限
- 8款实用HTML5开发框架
- 推荐算法——基于图模型
- (读书笔记)《玩着玩着就能成为PPT高手》——事前准备不能马虎
- html button 和 asp button的 各种click事件
- Git的常用命令使用
- shell脚本——sed
- 程序员面经:面试前到底该不该刷题以及面试前该如何准备
- C++_String类
- jstack简单使用,定位死循环、线程阻塞、死锁等问题
- 03--类
- D3D 9和D3D 11绘制流水线对比
- The Balance POJ