免費(fèi)AI編程助手
JavaScript 事件
事件
事件是什么？
JavaScript 與 HTML 的交互是通過(guò)事件來(lái)處理的，當(dāng)用戶或?yàn)g覽器操縱頁(yè)面時(shí)。事件就會(huì)發(fā)生。
當(dāng)頁(yè)面加載時(shí),這是一個(gè)事件。當(dāng)用戶單擊一個(gè)按鈕，點(diǎn)擊，是一個(gè)事件。另一個(gè)例子：事件就像按任何鍵，關(guān)閉窗口，調(diào)整窗口等。
開(kāi)發(fā)人員可以使用這些事件來(lái)執(zhí)行 JavaScript 編碼的響應(yīng)，如導(dǎo)致按鈕關(guān)閉窗口，信息顯示給用戶，數(shù)據(jù)驗(yàn)證，和任何其他類型的反應(yīng)的發(fā)生。
事件都是文檔對(duì)象模型（DOM）三級(jí)的一部分，并且每個(gè)HTML元素有一定的事件可以觸發(fā) JavaScript 代碼。
請(qǐng)通過(guò)這個(gè)小教程為更好地理解 HTML 事件參考。這里我們將看到一些例子來(lái)理解事件和 JavaScript 之間的關(guān)系：
onclick 事件類型
這是最常用的事件類型，當(dāng)用戶點(diǎn)擊鼠標(biāo)左按鈕。你可以把你的驗(yàn)證、警告等反對(duì)這個(gè)事件類型。
例子
<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)擊Say Hello按鈕 onclick 事件將發(fā)生，將觸發(fā) sayHello() 函數(shù),彈出一個(gè)hello world的消息彈窗。
onsubmit 事件類型
另一個(gè)最重要的是 onsubmit 事件類型。這個(gè)事件發(fā)生在您嘗試提交一個(gè)表單。所以你可以用此事件類型進(jìn)行表單驗(yàn)證。
下面一個(gè)簡(jiǎn)單簡(jiǎn)單的例子顯示其用法。我們?cè)谶@里調(diào)用 validate() 函數(shù)之前提交表單數(shù)據(jù)到網(wǎng)絡(luò)服務(wù)器。如果 validate() 函數(shù)返回 true 表單將提交否則不會(huì)提交數(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> onmouseover 和 onmouseout
這兩個(gè)事件類型將會(huì)幫助你創(chuàng)建好良好的圖像效果和文本事件。onmouseover 事件發(fā)生時(shí),當(dāng)你把你的鼠標(biāo)在任何元素上時(shí)， onmouseover 事件發(fā)生。當(dāng)你把鼠標(biāo)從該元素移開(kāi)時(shí)，onmouseout 事件發(fā)生。
例子
下面的例子顯示了一個(gè)部位如何反應(yīng)當(dāng)我們把鼠標(biāo)在這個(gè)部位上：
<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> 你可以改變不同的圖像使用這兩種事件類型或您可以創(chuàng)建幫助氣框，來(lái)幫助你的用戶。
HTML 4 標(biāo)準(zhǔn)事件
標(biāo)準(zhǔn)的 HTML 4 事件被列在這里,供您參考。執(zhí)行以下腳本顯示一個(gè)Javascript函數(shù)。
| Event | Value | Description |
|---|---|---|
| onchange | script | Script runs when the element changes |
| onsubmit | script | Script runs when the form is submitted |
| onreset | script | Script runs when the form is reset |
| onselect | script | Script runs when the element is selected |
| onblur | script | Script runs when the element loses focus |
| onfocus | script | Script runs when the element gets focus |
| onkeydown | script | Script runs when key is pressed |
| onkeypress | script | Script runs when key is pressed and released |
| onkeyup | script | Script runs when key is released |
| onclick | script | Script runs when a mouse click |
| ondblclick | script | Script runs when a mouse double-click |
| onmousedown | script | Script runs when mouse button is pressed |
| onmousemove | script | Script runs when mouse pointer moves |
| onmouseout | script | Script runs when mouse pointer moves out of an element |
| onmouseover | script | Script runs when mouse pointer moves over an element |
| onmouseup | script | Script runs when mouse button is released |
更多建議：