1.鼠標單擊事件( onclick ）:
onclick是鼠標單擊事件，當在網頁上單擊鼠標時，就會發生該事件。同時onclick事件調用的程序塊就會被執行，通常與按鈕一起使用。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>單擊事件 </title>
<script type="text/javascript">function openwin(){window.open('http://www.imooc.com','_blank','height=600,width=400,top=100,toolbar=no,left=0,menubar=no,scrollbars=no,status=no');}
</script>
</head>
<body><form><input name="點擊我" type="button" value="點擊我" onclick = "openwin()"/></form>
</body>
</html>
2.鼠標經過事件（onmouseover）
鼠標經過事件，當鼠標移到一個對象上時，該對象就觸發onmouseover事件，并執行onmouseover事件調用的程序。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 鼠標經過事件 </title> <script type="text/javascript">function message(){confirm("請輸入密碼后，再單擊確定!"); } </script> </head> <body> <form> 密碼:<input name="password" type="password" > <input name="確定" type="button" value="確定" onmouseover = "message()"/> </form> </body> </html>
3.鼠標移開事件（onmouseout）
鼠標移開事件，當鼠標移開當前對象時，執行onmouseout調用的程序。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠標移開事件 </title>
<script type="text/javascript">function message(){alert("不要移開，點擊后進行慕課網!"); }
</script>
</head>
<body>
<form><a href="http://www.imooc.com" onmouseout = "message()">點擊我</a>
</form>
</body>
</html>
4.光標聚焦事件（onfocus）
當網頁中的對象獲得聚點時，執行onfocus調用的程序就會被執行。
5.失焦事件（onblur）
onblur事件與onfocus是相對事件，當光標離開當前獲得聚焦對象的時候，觸發onblur事件，同時執行被調用的程序。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 失焦事件 </title>
<script type="text/javascript">function message(){alert("請確定已輸入密碼后，在移開!"); }
</script>
</head>
<body><form>用戶:<input name="username" type="text" value="請輸入用戶名！" onblur = "message()" >密碼:<input name="password" type="text" value="請輸入密碼！" ></form>
</body>
</html>
6.內容選中事件（onselect）
選中事件，當文本框或者文本域中的文字被選中時，觸發onselect事件，同時調用的程序就會被執行。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> 內容選中事件 </title> <script type="text/javascript">function message(){alert("您觸發了選中事件！"); } </script> </head> <body><form>個人簡介：<br><textarea name="summary" cols="60" rows="5" onselect = "message()">請寫入個人簡介，不少于200字！</textarea></form> </body> </html>
7.文本框內容改變事件（onchange）
通過改變文本框的內容來觸發onchange事件，同時執行被調用的程序。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> 文本框內容改變事件 </title> <script type="text/javascript">function message(){alert("您改變了文本內容！"); } </script> </head> <body><form>個人簡介：<br><textarea name="summary" cols="60" rows="5" onchange = "message()">請寫入個人簡介，不少于200字！</textarea></form> </body> </html>
8.加載事件（onload）
事件會在頁面加載完成后，立即發生，同時執行被調用的程序。
注意：1.?加載頁面時，觸發onload事件，事件寫在<body>標簽內。
? ? ? ? 2. 此節的加載頁面，可理解為打開一個新頁面時。
如下代碼,當加載一個新頁面時，彈出對話框“加載中，請稍等…”。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> 加載事件 </title> <script type="text/javascript">function message(){alert("加載中，請稍等…"); } </script> </head> <body onload = "message()">歡迎學習JavaScript。 </body> </html>
9.卸載事件（onunload）
當用戶退出頁面時（頁面關閉、頁面刷新等），觸發onUnload事件，同時執行被調用的程序。
注意：不同瀏覽器對onunload事件支持不同。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 卸載事件 </title>
<script type="text/javascript"> window.onunload = onunload_message; function onunload_message(){ alert("您確定離開該網頁嗎？"); }
</script>
</head>
<body>歡迎學習JavaScript。
</body>
</html>
綜合練習:
使用JS完成一個簡單的計算器功能。實現2個輸入框中輸入整數后，點擊第三個輸入框能給出2個整數的加減乘除。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>編程練習</title><script type="text/javascript">function count() {//獲取第一個輸入框的值var num1 = parseInt(document.getElementById("txt1").value)//獲取第二個輸入框的值var num2 = parseInt(document.getElementById("txt2").value);//獲取選擇框的值var select = document.getElementById("select").value;//獲取通過下拉框來選擇的值來改變加減乘除的運算法則var result = '';switch(select) {case '+' :result = num1 + num2;break;case '-' :result = num1 - num2;break;case '*' :result = num1 * num2;break;case '/' :result = num1 / num2;break;}//設置結果輸入框的值 document.getElementById("fruit").value = result;}</script></head><body><input type='text' id='txt1' /> <select id='select'><option value='+'>+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><input type='text' id='txt2' /> <input type='button' value=' = ' οnclick="count()" /> <!--通過 = 按鈕來調用創建的函數，得到結果--> <input type='text' id='fruit' /> </body>
</html>
)
