ASP.NET Web Forms-事件

件句柄是一种针对给定事件来执行代码的子例程。

ASP.NET - 事件句柄

请看下面的代码：

lbl1.Text="The date and time is " & now()

<html>

<body>

</form>

</body>

</html>

上面的代码将在何时被执行？答案是："不知道..."。

Page_Load 事件

Page_Load 事件是 ASP.NET 可理解的众多事件之一。Page_Load 事件会在页面加载时被触发， ASP.NET 将自动调用 Page_Load 子例程，并执行其中的代码：

实例

Sub Page_Load

lbl1.Text="The date and time is " & now()

End Sub

</script>

<html>

<body>

</form>

</body>

</html>

演示实例 »

注释：Page_Load 事件不包含对象引用或事件参数！

Page.IsPostBack 属性

Page_Load 子例程会在页面每次加载时运行。如果您只想在页面第一次加载时执行 Page_Load 子例程中的代码，那么您可以使用 Page.IsPostBack 属性。如果 Page.IsPostBack 属性设置为 false，则页面第一次被载入，如果设置为 true，则页面被传回到服务器（比如，通过点击表单上的按钮）：

实例

Sub Page_Load

if Not Page.IsPostBack then

lbl1.Text="The date and time is " & now()

end if

End Sub

Sub submit(s As Object, e As EventArgs)

lbl2.Text="Hello World!"

End Sub

</script>

<html>

<body>

<asp:button text="Submit" onclick="submit" runat="server" />

</form>

</body>

</html>

演示实例 »

上面的实例仅在页面第一次加载时显示 "The date and time is...." 消息。当用户点击 Submit 按钮是，submit 子例程将会在第二个 label 中写入 "Hello World!"，但是第一个 label 中的日期和时间不会改变。

件处理

一事件源:任何一个HTML元素(节点)body div button p a h1

二事件:你的操作

鼠标点击、页面或图像载入、鼠标悬浮于页面的某个热点之上、在表单中选取输入框、确认表单、键盘按键

鼠标:

click 单击

dblclick 双击

contextmenu(在body) 鼠标右键菜单(火狐浏览器不支持,IE和360支持)

mouseover 放上(移入)

mouseout 离开(移出)

mousemove 移动

mouseup 抬起

mousedown 按下

mouseenter 放上(移入)

mouseleave 离开(移出)

mouseover/mouseout与mousenter/onmouseleave区别: mouseover/mouseout不会参与冒泡, mousenter/onmouseleave参与冒泡

键盘:

keypress 键盘事件

keyup 抬起

keydown 按下

文档:

load 加载完毕

error 加载失败

unload 关闭

beforeunload 关闭之前

表单:

focus 焦点

blur 失去焦点

submit 提交事件

change 改变

其他:

scroll 滚动

select 选择

新增事件

oninput 事件在用户输入时触发。该事件在 <input> 或 <textarea> 元素的值发生改变时触发。

三事件处理程序

第一种: 格式:<tag on事件="事件处理程序">

<a href="htp://www.baidu.com/" onclick="javascript：alert('You have Clicked the link!')">MYlinker</a>

注意:"javascript："可以省略

第二种: 格式:<tag on事件="事件处理函数">

<a href="htp://www.baidu.com/" onclick="Myclick()">MYlinker</a>
<script type="text/javascript">
function Myclick(){
alert('You have Clicked the link!');
}
</script>

注意:事件处理函数不分前后

第三种:

格式 <script type="text/javascript">

对象.on事件=事件处理程序

</script>

<script>
window.onload=function (){
var oBtn=document.getElementById('btn1');
oBtn.onclick=function (){
alert('a');
};
};
</script>

注意: window.onload的意义,当页面加载的时候可以调用某些函数;

对于第二种格式, 不需要window.onload语句, 而第三种格式必须要使用window.onload语句(也可以将事件处理程序放到DOM文档底部);

四、实例

屏蔽鼠标右键菜单(火狐浏览器不支持,IE和360支持)

<body oncontextmenu="return false;">
</body>
<body oncontextmenu="alert('010-123456789');return false">
</body>
<body oncontextmenu="return test()">
<script>
function test(){
alert('010-123456789');
return false;

</script>
</body>

兼容性最好的版本见 javascript|实例|屏蔽鼠标右键

自动将表单内的英文转换成大写:

<input type="text" onkeyup="if(this.value!=this.value.toUpperCase()) this.value = this.value.toUpperCase() "/>

浏览器事件

浏览器事件指载入文档直到该文档被关闭期间的浏览器事件，如浏览器载入文档事件onload、关闭该文档事件onunload、

浏览器失去焦点事件onblur、获得焦点事件onfocus等。

<script type="text/javascript">
<!--
window.onload = function ()
{
var msg="\nwindow.load事件 : \n\n";
msg+=" 浏览器载入了文档!";
alert(msg);
}
window.onfocus = function ()
{
var msg="\nwindow.onfocus事件 : \n\n";
msg+=" 浏览器取得了焦点!";
alert(msg);
}
window.onblur = function ()
{
var msg="\nwindow.onblur事件 : \n\n";
msg+=" 浏览器失去了焦点!";
alert(msg);
}
window.onscroll = function ()
{
var msg="\nwindow.onscroll事件 : \n\n";
msg+=" 用户拖动了滚动条!";
alert(msg);
}
window.onresize = function ()
{
var msg="\nwindow.onresize事件 : \n\n";
msg+=" 用户改变了窗口尺寸!";
alert(msg);
}
//-->
</script>

卸载事件使用：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 卸载事件 </title>
<script type="text/javascript">
window.onunload = onunload_message;
function onunload_message(){
alert("您确定离开该网页吗？");
}
</script>
</head>
<body>
欢迎学习JavaScript。
</body>
</html>

多数浏览器内部对象都拥有很多事件，下面将以表格的形式给出常用的事件及何时触发这些事件。

JavaScript的常用事件

onabort 对象载入被中断时触发

onblur 元素或窗口本身失去焦点时触发

onchange 改变<select>元素中的选项或其他表单元素失去焦点，并且在其获取焦点后内容发生过改变时触发

onclick 单击鼠标左键时触发。当光标的焦点在按钮上，并按下回车键时，也会触发该事件

ondblclick 双击鼠标左键时触发

onerror 出现错误时触发

onfocus 任何元素或窗口本身获得焦点时触发

onkeydown 键盘上的按键（包括Shift或Alt等键）被按下时触发，如果一直按着某键，则会不断触发。当返回false时，取消默认动作

onkeypress 键盘上的按键被按下，并产生一个字符时发生。也就是说，当按下Shift或Alt等键时不触发。如果一直按下某键时，会不断触发。

onkeyup 释放键盘上的按键(键盘上所有按键)时触发

onload 页面完全载入后，在Window对象上触发；所有框架都载入后，在框架集上触发；

<img>标记指定的图像完全载入后，在其上触发；或<object>标记指定的对象完全载入后，在其上触发

onmousedown 单击任何一个鼠标按键时触发

onmousemove 鼠标在某个元素上移动时持续触发

onmouseout 将鼠标从指定的元素上移开时触发

onmouseover 鼠标移到某个元素上时触发

onmouseup 释放任意一个鼠标按键时触发

onreset 单击重置按钮时，在<form>上触发

onresize 窗口或框架的大小发生改变时触发

onscroll 在任何带滚动条的元素或窗口上滚动时触发

onselect 选中文本时触发

onsubmit 单击提交按钮时，在<form>上触发

onunload 页面完全卸载后，在Window对象上触发；或者所有框架都卸载后，在框架集上触发

Object 对象

Object 对象表示一个 HTML <object> 元素。

访问 Object 对象

您可以使用 getElementById() 来访问 <object> 元素：

var x = document.getElementById("myObject");

创建 Object 对象

您可以使用 document.createElement() 方法来创建 <object> 元素：

var x = document.createElement("OBJECT");

Object 对象属性

属性	描述
align	HTML5 中不支持。使用 style.cssFloat 替代。设置或返回对象相对于周围文本的对齐方式。
archive	HTML5 中不支持。设置或返回一个用于实现对象存档功能的字符串。
border	HTML5 中不支持。使用 style.border 替代。设置或返回围绕对象的边框。
code	HTML5 中不支持。设置或返回文件的 URL，该文件包含已编译的 Java 类。
codeBase	HTML5 中不支持。设置或返回组件的 URL。
codeType	HTML5 中不支持。
data
declare	HTML5 中不支持。
form	返回对对象的父表单的引用。
height	设置或返回对象的高度。
hspace	HTML5 中不支持。使用 style.margin 替代。设置或返回对象的水平外边距。
name	设置或返回对象的名称。
standby	HTML5 中不支持。设置或返回在加载对象时的消息。
type	设置或返回通过 data 属性下载的数据的内容类型。
useMap
vspace	HTML5 中不支持。使用 style.margin 替代。设置或返回对象的垂直外边距。
width	设置或返回对象的宽度。

标准属性和事件

Object 对象同样支持标准属性和事件。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：HTML 列表
下一篇：HTML中实现鼠标移动到table中某个单元格中颜色改变

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

ASP.NET Web Forms-事件

您的项目需求