1.onclick事件
點擊事件（onclick並不是js中的方法，onclick只是瀏覽器提供js的一個dom接口，讓js可以操作dom，所以onclick大小寫都是沒問題的，比如HTML代碼就不用區分大小寫）
例：
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionmyFunction(){
alert("測試onclick點擊事件");
}
</script>
</head>
<body>
<center>
<buttononclick="myFunction()">點擊這裏</button>
</center>
</body>
</html>
onclick通常在下列基本對象中產生：
button(按鈕對象)、checkbox(複選框)、radio(單選框)、reset buttons(重置按鈕)、submit buttons(提交按鈕)
2.onload事件
可以body執行，<bodyοnlοad="alert(123)"></body>,其中onload後面可以寫一個方法，如：οnlοad="test()",然後在JavaScript中寫一個test()方法，則在頁面一開始加載的時候會先調用這個方法
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functiontest(){
alert("測試onload方法");
}
</script>
</head>
<bodyonload="test()">
</body>
</html>
注意：此方法只能寫在<body>標籤之中
3.onchange事件
事件在內容改變的時候觸發，和Jquery中的change()方法一樣
當內容改變時觸發。可用於文本框、列表框等對象，該事件一般用於響應用戶修改內容帶來的其他改變操作。
說明：當用戶向一個文本框中輸入文本時，不會觸發onchange事件，只有用戶輸入結束後，單擊文本框以外的區域，使文本框失去焦點時才觸發該事件，如果是下拉框，則選擇結束後即觸發。
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionupperCase(){
varx = document.getElementById("fname").value;
document.getElementById("fname").value = x.toUpperCase();
}
</script>
</head>
<body>
<p>
<labelfor="name">用戶名：</label>
<inputtype="text"id="fname"onchange="upperCase()"value=""/>
</p>
</body>
</html>
說明：上例實際效果是，當輸入框失去焦點時內容轉成大寫。出現這種情況是由於input必須是失去焦點纔會檢測到內容發生改變。而change事件通常是用於下拉菜單select標籤。
4.onblur事件和onfocus事件
當前元素失去焦點時觸發該事件，對應的是onfocus事件：得到焦點事件
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionchkvalue(txt) {
if(txt.value=="") alert("文本框裏必須填寫內容!");
}
functionsetStyle(x){
document.getElementById(x).style.background="yellow"
}
</script>
</head>
<body>
失去焦點：
<inputtype="text"name="name"value=""size="30"onblur="chkvalue(this)"><br>
得到焦點：
<inputtype="text"id="name"value=""size="30"onfocus="setStyle(this.id)">
</body>
</html>
5.onscroll事件
窗口滾動事件：當頁面滾動時調用函數。此事件寫在方法的外面，且函數名後面不加括號，例如window.οnscrοll=move
例：
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionmove() {
alert("頁面滾動時調用");
}
window.onscroll = move;
</script>
</head>
<body>
測試onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
測試onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
測試onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
測試onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</body>
</html>
6.onsubmit事件
屬於<form>表單元素，寫在<form>表單標籤內。語法：οnsubmit=”return 函數名()”
例：
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionmove() {
alert("測試onsubmit........"+testForm.name.value);
}
</script>
</head>
<body>
<formaction=""method="post"name="testForm"onsubmit="returnmove()">
<inputtype="text"name="name"value="">
<br>
<inputtype="submit"name="submit"value="測試onsubmit"/>
</form>
</body>
</html>
2.鼠標相關事件
1.onmousemove和onmouseout和onmouseover事件
Onmouseover:鼠標移動到某對象範圍的上方時，觸發事件調用函數。注意：在同一個區域中，無論怎樣移動都只觸發一次函數。
Onmouseout:鼠標離開某對象範圍時，觸發事件調用函數。
Onmousemove:鼠標移動到某對象範圍的上方時，觸發事件調用函數。注意：在同一個區域中，只要鼠標動一次就觸發一次事件。
例：
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionbigImg(x)
{
x.style.height="180px";
x.style.width="180px";
}
functionnormalImg(x)
{
x.style.height="128px";
x.style.width="128px";
}
</script>
</head>
<body>
<imgonmousemove="bigImg(this)"onmouseout="normalImg(this)"border="0"src="images/defaultAvatar.gif"alt="Smiley">
</body>
</html>
2.onmouseup和onmousedown
Onmouseup:當鼠標鬆開時觸發事件
Onmousedown:當鼠標按下鍵時觸發事件
例：
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionmouseDown(){
document.getElementById("p1").style.color="red";
}
functionmouseUp(){
document.getElementById("p1").style.color="green";
}
</script>
</head>
<body>
<pid="p1"onmousedown="mouseDown()"onmouseup="mouseUp()">
請點擊文本！mouseDown()函數當鼠標按鈕在段落上被按下時觸發。此函數把文本顏色設置爲紅色。mouseUp() 函數在鼠標按鈕被釋放時觸發。mouseUp() 函數把文本的顏色設置爲綠色。
</p>
</body>
</html>