JavaScript 事件
HTML 事件是發(fā)生在 HTML 元素上的事情。
當(dāng)在 HTML 頁面中使用 JavaScript 時(shí)， JavaScript 可以觸發(fā)這些事件。
HTML 事件
HTML 事件可以是瀏覽器行為，也可以是用戶行為。
以下是 HTML 事件的實(shí)例：
HTML 頁面完成加載
HTML input 字段改變時(shí)
HTML 按鈕被點(diǎn)擊
通常，當(dāng)事件發(fā)生時(shí)，你可以做些事情。
在事件觸發(fā)時(shí) JavaScript 可以執(zhí)行一些代碼。
HTML 元素中可以添加事件屬性，使用 JavaScript 代碼來添加 HTML 元素。
單引號(hào):
雙引號(hào):
在以下實(shí)例中，按鈕元素中添加了 onclick 屬性 (并加上代碼):
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<button onclick="getElementById('demo').innerHTML=Date()">現(xiàn)在的時(shí)間是?</button>
<p id="demo"></p>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
以上實(shí)例中，JavaScript 代碼將修改 id="demo" 元素的內(nèi)容。
在下一個(gè)實(shí)例中，代碼將修改自身元素的內(nèi)容 (使用 this.innerHTML):
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <button onclick="this.innerHTML=Date()">現(xiàn)在的時(shí)間是?</button> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
 | JavaScript代碼通常是幾行代碼。比較常見的是通過事件屬性來調(diào)用： |
|---|
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p>點(diǎn)擊按鈕執(zhí)行 <em>displayDate()</em> 函數(shù).</p>
<button onclick="displayDate()">點(diǎn)這里</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
常見的HTML事件
下面是一些常見的HTML事件的列表:
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素改變 |
| onclick | 用戶點(diǎn)擊 HTML 元素 |
| onmouseover | 用戶在一個(gè)HTML元素上移動(dòng)鼠標(biāo) |
| onmouseout | 用戶從一個(gè)HTML元素上移開鼠標(biāo) |
| onkeydown | 用戶按下鍵盤按鍵 |
| onload | 瀏覽器已完成頁面的加載 |
更多事件列表: JavaScript 參考手冊(cè) - HTML DOM 事件。
JavaScript 可以做什么?
事件可以用于處理表單驗(yàn)證，用戶輸入，用戶行為及瀏覽器動(dòng)作:
頁面加載時(shí)觸發(fā)事件
頁面關(guān)閉時(shí)觸發(fā)事件
用戶點(diǎn)擊按鈕執(zhí)行動(dòng)作
驗(yàn)證用戶輸入內(nèi)容的合法性
等等 ...
可以使用多種方法來執(zhí)行 JavaScript 事件代碼：
HTML 事件屬性可以直接執(zhí)行 JavaScript 代碼
HTML 事件屬性可以調(diào)用 JavaScript 函數(shù)
你可以為 HTML 元素指定自己的事件處理程序
你可以阻止事件的發(fā)生。
等等 ...
| 在 HTML DOM 章節(jié)中你將會(huì)學(xué)到更多關(guān)于事件及事件處理程序的知識(shí)。 |
|---|