ASP.NET Web Forms-事件

件句柄是一種針對給定事件來執(zhí)行代碼的子例程。

ASP.NET - 事件句柄

請看下面的代碼：

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

<html>

<body>

</form>

</body>

</html>

上面的代碼將在何時被執(zhí)行？答案是："不知道..."。

Page_Load 事件

Page_Load 事件是 ASP.NET 可理解的眾多事件之一。Page_Load 事件會在頁面加載時被觸發(fā)， ASP.NET 將自動調(diào)用 Page_Load 子例程，并執(zhí)行其中的代碼：

實例

Sub Page_Load

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

End Sub

</script>

<html>

<body>

</form>

</body>

</html>

演示實例 ?

注釋：Page_Load 事件不包含對象引用或事件參數(shù)！

Page.IsPostBack 屬性

Page_Load 子例程會在頁面每次加載時運行。如果您只想在頁面第一次加載時執(zhí)行 Page_Load 子例程中的代碼，那么您可以使用 Page.IsPostBack 屬性。如果 Page.IsPostBack 屬性設(shè)置為 false，則頁面第一次被載入，如果設(shè)置為 true，則頁面被傳回到服務(wù)器（比如，通過點擊表單上的按鈕）：

實例

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...." 消息。當(dāng)用戶點擊 Submit 按鈕是，submit 子例程將會在第二個 label 中寫入 "Hello World!"，但是第一個 label 中的日期和時間不會改變。

件處理

一事件源:任何一個HTML元素(節(jié)點)body div button p a h1

二事件:你的操作

鼠標(biāo)點擊、頁面或圖像載入、鼠標(biāo)懸浮于頁面的某個熱點之上、在表單中選取輸入框、確認(rèn)表單、鍵盤按鍵

鼠標(biāo):

click 單擊

dblclick 雙擊

contextmenu(在body) 鼠標(biāo)右鍵菜單(火狐瀏覽器不支持,IE和360支持)

mouseover 放上(移入)

mouseout 離開(移出)

mousemove 移動

mouseup 抬起

mousedown 按下

mouseenter 放上(移入)

mouseleave 離開(移出)

mouseover/mouseout與mousenter/onmouseleave區(qū)別: mouseover/mouseout不會參與冒泡, mousenter/onmouseleave參與冒泡

鍵盤:

keypress 鍵盤事件

keyup 抬起

keydown 按下

文檔:

load 加載完畢

error 加載失敗

unload 關(guān)閉

beforeunload 關(guān)閉之前

表單:

focus 焦點

blur 失去焦點

submit 提交事件

change 改變

其他:

scroll 滾動

select 選擇

新增事件

oninput 事件在用戶輸入時觸發(fā)。該事件在 <input> 或 <textarea> 元素的值發(fā)生改變時觸發(fā)。

三事件處理程序

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

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

注意:"javascript："可以省略

第二種: 格式:<tag on事件="事件處理函數(shù)">

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

注意:事件處理函數(shù)不分前后

第三種:

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

對象.on事件=事件處理程序

</script>

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

注意: window.onload的意義,當(dāng)頁面加載的時候可以調(diào)用某些函數(shù);

對于第二種格式, 不需要window.onload語句, 而第三種格式必須要使用window.onload語句(也可以將事件處理程序放到DOM文檔底部);

四、實例

屏蔽鼠標(biāo)右鍵菜單(火狐瀏覽器不支持,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|實例|屏蔽鼠標(biāo)右鍵

自動將表單內(nèi)的英文轉(zhuǎn)換成大寫:

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

瀏覽器事件

瀏覽器事件指載入文檔直到該文檔被關(guān)閉期間的瀏覽器事件，如瀏覽器載入文檔事件onload、關(guān)閉該文檔事件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("您確定離開該網(wǎng)頁嗎？");
}
</script>
</head>
<body>
歡迎學(xué)習(xí)JavaScript。
</body>
</html>

多數(shù)瀏覽器內(nèi)部對象都擁有很多事件，下面將以表格的形式給出常用的事件及何時觸發(fā)這些事件。

JavaScript的常用事件

onabort 對象載入被中斷時觸發(fā)

onblur 元素或窗口本身失去焦點時觸發(fā)

onchange 改變<select>元素中的選項或其他表單元素失去焦點，并且在其獲取焦點后內(nèi)容發(fā)生過改變時觸發(fā)

onclick 單擊鼠標(biāo)左鍵時觸發(fā)。當(dāng)光標(biāo)的焦點在按鈕上，并按下回車鍵時，也會觸發(fā)該事件

ondblclick 雙擊鼠標(biāo)左鍵時觸發(fā)

onerror 出現(xiàn)錯誤時觸發(fā)

onfocus 任何元素或窗口本身獲得焦點時觸發(fā)

onkeydown 鍵盤上的按鍵（包括Shift或Alt等鍵）被按下時觸發(fā)，如果一直按著某鍵，則會不斷觸發(fā)。當(dāng)返回false時，取消默認(rèn)動作

onkeypress 鍵盤上的按鍵被按下，并產(chǎn)生一個字符時發(fā)生。也就是說，當(dāng)按下Shift或Alt等鍵時不觸發(fā)。如果一直按下某鍵時，會不斷觸發(fā)。

onkeyup 釋放鍵盤上的按鍵(鍵盤上所有按鍵)時觸發(fā)

onload 頁面完全載入后，在Window對象上觸發(fā)；所有框架都載入后，在框架集上觸發(fā)；

<img>標(biāo)記指定的圖像完全載入后，在其上觸發(fā)；或<object>標(biāo)記指定的對象完全載入后，在其上觸發(fā)

onmousedown 單擊任何一個鼠標(biāo)按鍵時觸發(fā)

onmousemove 鼠標(biāo)在某個元素上移動時持續(xù)觸發(fā)

onmouseout 將鼠標(biāo)從指定的元素上移開時觸發(fā)

onmouseover 鼠標(biāo)移到某個元素上時觸發(fā)

onmouseup 釋放任意一個鼠標(biāo)按鍵時觸發(fā)

onreset 單擊重置按鈕時，在<form>上觸發(fā)

onresize 窗口或框架的大小發(fā)生改變時觸發(fā)

onscroll 在任何帶滾動條的元素或窗口上滾動時觸發(fā)

onselect 選中文本時觸發(fā)

onsubmit 單擊提交按鈕時，在<form>上觸發(fā)

onunload 頁面完全卸載后，在Window對象上觸發(fā)；或者所有框架都卸載后，在框架集上觸發(fā)

Object 對象

Object 對象表示一個 HTML <object> 元素。

訪問 Object 對象

您可以使用 getElementById() 來訪問 <object> 元素：

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

創(chuàng)建 Object 對象

您可以使用 document.createElement() 方法來創(chuàng)建 <object> 元素：

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

Object 對象屬性

屬性	描述
align	HTML5 中不支持。使用 style.cssFloat 替代。設(shè)置或返回對象相對于周圍文本的對齊方式。
archive	HTML5 中不支持。設(shè)置或返回一個用于實現(xiàn)對象存檔功能的字符串。
border	HTML5 中不支持。使用 style.border 替代。設(shè)置或返回圍繞對象的邊框。
code	HTML5 中不支持。設(shè)置或返回文件的 URL，該文件包含已編譯的 Java 類。
codeBase	HTML5 中不支持。設(shè)置或返回組件的 URL。
codeType	HTML5 中不支持。
data
declare	HTML5 中不支持。
form	返回對對象的父表單的引用。
height	設(shè)置或返回對象的高度。
hspace	HTML5 中不支持。使用 style.margin 替代。設(shè)置或返回對象的水平外邊距。
name	設(shè)置或返回對象的名稱。
standby	HTML5 中不支持。設(shè)置或返回在加載對象時的消息。
type	設(shè)置或返回通過 data 屬性下載的數(shù)據(jù)的內(nèi)容類型。
useMap
vspace	HTML5 中不支持。使用 style.margin 替代。設(shè)置或返回對象的垂直外邊距。
width	設(shè)置或返回對象的寬度。

標(biāo)準(zhǔn)屬性和事件

Object 對象同樣支持標(biāo)準(zhǔn) 屬性和事件。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：HTML 列表
下一篇：HTML中實現(xiàn)鼠標(biāo)移動到table中某個單元格中顏色改變

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

ASP.NET Web Forms-事件

您的項目需求