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