JavaScript HTML DOM 事件
事件
#事件是使用者或瀏覽器本身執行的某種動作，如click, load和mouseover都是事件的名字。
事件是javaScript和DOM之間的橋樑。
你若觸發，我便執行－事件發生，呼叫它的處理函數執行對應的JavaScript程式碼給予回應。
典型的例子有：頁面載入完畢觸發load事件；使用者點擊元素，觸發click事件。
對事件做出反應
我們可以在事件發生時執行 JavaScript，例如當使用者在 HTML 元素上點擊時。
如需在使用者點選某個元素時執行程式碼，請為一個HTML 事件屬性新增JavaScript 程式碼：
onclick=JavaScript
HTML事件的範例：
當使用者點擊滑鼠時
當網頁已載入時
當圖像已載入時
當滑鼠移到元素上時
當輸入欄位被改變時
當提交HTML 表單時
當使用者觸發按鍵時
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<script>
function changetext(id){
id.innerHTML="hello";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击！</h1>
</body>
</html>如需向HTML 元素指派事件，您可以使用事件屬性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<button onclick="displayDate()">点击</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>HTML DOM 允許您使用JavaScript 來為HTML 元素指派事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
</head>
<body>
<button id="myBtn">点这里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>onload 和onunload 事件
onload 和onunload 事件會在使用者進入或離開頁面時觸發。
onload 事件可用於偵測訪客的瀏覽器類型和瀏覽器版本，並基於這些資訊來載入網頁的正確版本。
onload 和 onunload 事件可用來處理 cookie。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script type="text/javascript">
function load(){
alert("页面加载完成");
}
</script>
</head>
<body onload="load()">
</body>
</html>onchange 事件
onchange 事件常常結合對輸入欄位的驗證來使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<script>
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，将小写字母转为大写字母。</p>
</body>
</html>onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用於在使用者的滑鼠移至 HTML 元素上方或移出元素時觸發函數。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:yellow;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="鼠标请移动至此"
}
</script>
</body>
</html>onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 構成了滑鼠點擊事件的所有部分。首先當點擊滑鼠按鈕時，會觸發 onmousedown 事件，當釋放滑鼠按鈕時，會觸發 onmouseup 事件，最後，當完成滑鼠點擊時，會觸發 onclick 事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script type="text/javascript">
function noNumbers(e)
{
var keynum;
var keychar;
keynum = window.event ? e.keyCode : e.which;
keychar = String.fromCharCode(keynum);
alert(keynum+':'+keychar);
}
</script>
</head>
<body>
<input type="text" onkeydown="return noNumbers(event)" />
</body>
</html>其他事件：
onmousedown 和onmouseup
當使用者按下滑鼠按鈕時，更換一個圖片。
onload
當頁面完成載入時，顯示一個提示框。
onfocus
當輸入欄位獲得焦點時，改變其背景色。
滑鼠事件
當指標移動到元素上方時，改變其顏色；當指標移出文字後，會再次改變其顏色。
- 課程推薦
- 課件下載
課件暫不提供下載，工作人員正在整理中，後期請多關注該課程~ 