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執行，<bodyonload="alert(123)"></body>,其中onload后面可以寫一個方法，如：onload="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.onscroll=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>表單標簽內。語法：onsubmit=”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>
常用的事件主要有:
(1)單擊事件:onclick。用戶單擊鼠標按鍵時產生的事件，同時。nclick指定的事件處理程序或代碼將被調用執行.
(2)改變事件:onchange。當text或textarea元素內的字符值改變或select表格選項狀態改變時發生該事件。
(3)選中事件:onselect。當text或textarea對象中的文字被選中時會引發該事件。如:
<ipnut type="text" value="默認信息”onselect=alert(”您選中T文本框中的文字”)>
(4)獲得焦點事件:onfocus。用戶單擊text或textarea以及select對象，即光標落在文本框或選擇框時會產生該事件。如:
<select name= "zhengjian" onfocus=alert(”我成為焦點”)>
(5)失去焦點事件:onblur.失去焦點事件正好與獲得焦點事件相對，當text或textarea以及select對象不再擁有焦點而退出后台時，引發該事件。
(6)載人文件事件:onload,’當頁面文件載人時產生該事件。onload的一個作用就是在首次載人一個頁面文件時檢測cookie的值，並用一個變量為其賦值，使它可以被源代碼使用，本事件是window的事件，但是在HTML中指定事件處理程序時，一般把它寫在<body>標記中。如:
<body onload=alert(”正在加載頁面，請等待一”)>
(7)卸載文件事件:onunload。與載人文件事件。nload正好相反，當Web頁面退出時引發的事件，並可更新。ookie的狀態。如:
<body onunload=confirm(”你確定要離開本頁?”)>
(8)鼠標鎮蓋事件:onmouseover, onmouseover是當鼠標位於元素上方時所引發的事件。如:
<input type= "boutton" value=”按鈕”onmouseover= "window. status=‘請您注意下面的狀態欄·;return true">
(9)鼠標離開事件:onmouseout, onmouseout是當鼠標離開元素時引發的事件。如果和鼠標覆蓋事件同時使用，可以創建動態按鈕的效果。
(10)一般事件。
ondbclick:鼠標雙擊事件。
onkeypress:當鍵盤上的某個鍵被按下並且釋放時觸發的事件，要求頁面內必須有激活的對象。
onkeydown:當鍵盤上某個鍵被按下時觸發的事件，要求頁面內必須有激活的對象。
onkeyup:當鍵盤上某個鍵被放開時觸發的事件，要求頁面內必須有激活的對象。
(11)頁面相關事件。
onabort:圖片在下載時被用戶中斷時觸發的事件。
onbeforeunload:當前頁面的內容將要被改變時觸發的事件。