JavaScript與HTML交互是通過在用戶或?yàn)g覽器操縱頁面上發(fā)生的事件進(jìn)行處理。
當(dāng)頁面加載,這是一個(gè)事件。當(dāng)用戶點(diǎn)擊一個(gè)按鈕,這一下,也就是一個(gè)事件。事件的另一個(gè)例子是類似按下任意鍵,關(guān)閉窗口,調(diào)整窗口等。
開發(fā)者可以使用這些事件執(zhí)行JavaScript編碼響應(yīng),這引起按鈕以關(guān)閉視窗,消息,以便顯示給用戶,要驗(yàn)證的數(shù)據(jù),以及幾乎任何其它類型的響應(yīng)可以發(fā)生的。
事件是文檔對象模型(DOM)第3級,每一個(gè)HTML元素的一部分有一套可以觸發(fā)JavaScript代碼事件。
請繼續(xù)通過這個(gè)小教程更好地理解 HTML事件參考. 在這里,我們將看到一些例子來了解事件和JavaScript之間的關(guān)系:
這是當(dāng)用戶點(diǎn)擊鼠標(biāo)左鍵時(shí)發(fā)生的最頻繁使用的事件類型??梢葬槍Υ耸录愋桶羊?yàn)證信息,警告等顯示。
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
這將產(chǎn)生以下結(jié)果,當(dāng)你點(diǎn)擊“Hello”按鈕,然后會的onclick事件的發(fā)生將觸發(fā)sayHello()函數(shù)。
另一個(gè)最重要的事件類型是 onsubmit。當(dāng)嘗試提交表單時(shí)引發(fā)此事件。所以,可以把表單驗(yàn)證針對此事件類型。
下面是簡單的例子,說明它的用法。在這里,我們提交表單數(shù)據(jù)到Web服務(wù)器之前,調(diào)用一個(gè)validate()函數(shù)。如果表單將被提交的validate()函數(shù)返回true,否則不會提交數(shù)據(jù)。
<html>
<head>
<script type="text/javascript">
<!--
function validation() {
all validation goes here
.........
return either true or false
}
//-->
</script>
</head>
<body>
<form method="POST" action="t.cgi" onsubmit="return validate()">
.......
<input type="submit" value="Submit" />
</form>
</body>
</html>
這兩個(gè)事件類型將幫助創(chuàng)建圖片甚至用文字以及不錯(cuò)的效果。當(dāng)把鼠標(biāo)在任何元素,當(dāng)從元素把鼠標(biāo)移出發(fā)生onmouseout事件,移過時(shí)發(fā)生 onmouseover 事件。
下面的例子說明,分組反應(yīng)如下:
<html>
<head>
<script type="text/javascript">
<!--
function over() {
alert("Mouse Over");
}
function out() {
alert("Mouse Out");
}
//-->
</script>
</head>
<body>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>
可以使用這兩個(gè)事件類型改變不同的圖像,也可以創(chuàng)建幫助你的用戶。
標(biāo)準(zhǔn)的HTML4事件列在這里,供大家參考。下面的腳本顯示一個(gè)Javascript函數(shù)功能以對該事件執(zhí)行。
| Event | Value | 描述 |
|---|---|---|
| onchange | script | 腳本運(yùn)行時(shí)的元素改變 |
| onsubmit | script | 腳本時(shí)提交表單運(yùn)行 |
| onreset | script | 腳本運(yùn)行時(shí)的形式被重置 |
| onselect | script | 腳本當(dāng)選擇元素運(yùn)行 |
| onblur | script | 腳本運(yùn)行時(shí)的元素失去焦點(diǎn) |
| onfocus | script | 腳本運(yùn)行時(shí)的元素獲得焦點(diǎn) |
| onkeydown | script | 腳本的時(shí)候鍵被按下運(yùn)行 |
| onkeypress | script | 腳本的時(shí)候鍵被按下并釋放運(yùn)行 |
| onkeyup | script | 腳本的時(shí)候鍵被釋放運(yùn)行 |
| onclick | script | 腳本運(yùn)行時(shí),用鼠標(biāo)點(diǎn)擊 |
| ondblclick | script | 腳本運(yùn)行時(shí),鼠標(biāo)雙擊 |
| onmousedown | script | 腳本的時(shí)候按下鼠標(biāo)按鈕運(yùn)行 |
| onmousemove | script | 腳本運(yùn)行時(shí)鼠標(biāo)指針移動 |
| onmouseout | script | 腳本運(yùn)行時(shí)鼠標(biāo)指針移出元素 |
| onmouseover | script | 腳本運(yùn)行時(shí)鼠標(biāo)指針掠過元素 |
| onmouseup | script | 腳本時(shí)釋放鼠標(biāo)按鍵運(yùn)行 |