Javascript常用事件總結
阿新 • • 發佈：2019-01-12
1、onload和onunload事件。
onload和onunload會在使用者進入和離開頁面的時候觸發。
例如：onload會在頁面頁面成功載入完成之後彈出來一個訊息框。
<body onload="mymessage()">
<script>
function mymessage(){
alert("訊息在 onload 事件觸發後彈出。");
}
</script>
<p>成功進入</p>
</body>
用onunload嘗試多次均未彈出訊息框，瀏覽器把這個功能廢棄啦？
2、onchange事件
常結合對輸入欄位的驗證來使用。
例如：當用戶改變輸入欄位的內容時，呼叫toUpperCase()函式。
<head>
<script>
function myfunction(){
var x=document.getElementById("info");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
<input type="text" id="info" onchange="myfunction()">
<p>當離開輸入框時，函式將被觸發，將小寫字母轉化為大寫字母< 3、onmouseover和onmouseout事件。
onmouseover是將滑鼠移動上來之後發生一些變化。
onmouseout是將滑鼠移走後發生的一些變化。
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>動態變化</title>
<script>
function over(id){
id.innerHTML="Oh,Nice!";
id.style.color="red";
} 4、onmousedown，onmouseup和onclick事件。
onmousedown,onmouseup,onclick構成了滑鼠點選事件的所有部分。首先當點選滑鼠按鈕時，會觸發onmousedown事件，當釋放滑鼠按鈕時，會觸發onmouseup事件，最後，當完成滑鼠點選時，會觸發onclick事件。
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>動態變化</title>
<script>
function over(id){
id.style.color="red";
id.innerHTML="Oh,Nice!";
}
function out(id){
id.innerHTML="Oh,Bye!";
id.style.background="blue";
}
function cl(id){
id.innerHTML="Come on!";
id.style.color="#eee";
id.style.background="#666";
}
</script>
</head>
<body>
<div onmousedown="over(this);" onmouseup="out(this);" onclick="cl(this)" style="background-color:#666;width:30%;height:100px;line-height:100px;text-align:center;font-size:5em;color:#eee;">Come on!</div> //字型顏色直接用color
</body>
</html>
字型顏色在style裡面直接用color,用font-color不管用。
在這裡也可以發現，onmouseup和onclick是重複的（會覆蓋掉），寫一個就行。
5、onfocus事件。
當輸入欄位獲得焦點時，改變其屬性。
（當輸入框獲取焦點時，改變其背景顏色）
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<script>
function foc(id){
id.style.background="blue";
}
</script>
</head>
<body>
<input type="text" onfocus="foc(this)">
</body>
</html>
背景顏色，用background控制，而不是background-color。