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-事件

您的項目需求