JavaScript 創(chuàng)建動態(tài)頁面至朗。事件是可以被 JavaScript 偵測到的行為。 網(wǎng)頁中的每個元素都可以產(chǎn)生某些可以觸發(fā) JavaScript 函數(shù)或程序的事件剧浸。
比如說锹引，當(dāng)用戶單擊按鈕或者提交表單數(shù)據(jù)時，就發(fā)生一個鼠標(biāo)單擊（onclick）事件唆香，需要瀏覽器做出處理嫌变，返回給用戶一個結(jié)果。
主要事件表:
鼠標(biāo)單擊事件( onclick ）
onclick是鼠標(biāo)單擊事件躬它，當(dāng)在網(wǎng)頁上單擊鼠標(biāo)時腾啥，就會發(fā)生該事件。同時onclick事件調(diào)用的程序塊就會被執(zhí)行虑凛，通常與按鈕一起使用碑宴。
比如，我們單擊按鈕時桑谍，觸發(fā) onclick 事件延柠，并調(diào)用兩個數(shù)和的函數(shù)add2()惹苗。代碼如下：
<html>
<head>
<script type="text/javascript">
function add2(){
var numa,numb,sum;
numa=6;
numb=8;
sum=numa+numb;
document.write("兩數(shù)和為:"+sum); }
</script>
</head>
<body>
<form>
<input name="button" type="button" value="點(diǎn)擊提交" onclick="add2()" />
</form>
</body>
</html>
注意: 在網(wǎng)頁中忘闻，如使用事件，就在該元素中設(shè)置事件屬性处窥。
鼠標(biāo)經(jīng)過事件（onmouseover）
鼠標(biāo)經(jīng)過事件，當(dāng)鼠標(biāo)移到一個對象上時增热，該對象就觸發(fā)onmouseover事件整以，并執(zhí)行onmouseover事件調(diào)用的程序。
現(xiàn)實(shí)鼠標(biāo)經(jīng)過"確定"按鈕時峻仇，觸發(fā)onmouseover事件公黑，調(diào)用函數(shù)info()，彈出消息框摄咆，代碼如下:
鼠標(biāo)移開事件（onmouseout）
鼠標(biāo)移開事件凡蚜，當(dāng)鼠標(biāo)移開當(dāng)前對象時，執(zhí)行onmouseout調(diào)用的程序吭从。
當(dāng)把鼠標(biāo)移動到"登錄"按鈕上朝蜘，然后再移開時，觸發(fā)onmouseout事件涩金，調(diào)用函數(shù)message()谱醇，代碼如下:
光標(biāo)聚焦事件（onfocus）
當(dāng)網(wǎng)頁中的對象獲得聚點(diǎn)時，執(zhí)行onfocus調(diào)用的程序就會被執(zhí)行步做。
如下代碼, 當(dāng)將光標(biāo)移到文本框內(nèi)時副渴，即焦點(diǎn)在文本框內(nèi)，觸發(fā)onfocus 事件辆床，并調(diào)用函數(shù)message()佳晶。
提示：光標(biāo)聚焦事件是一定會不停的彈窗,點(diǎn)確定和×都沒用。因?yàn)楣鈽?biāo)焦點(diǎn)沒有改變讼载，所以一直會彈出轿秧。
失焦事件（onblur）
onblur事件與onfocus是相對事件，當(dāng)光標(biāo)離開當(dāng)前獲得聚焦對象的時候咨堤，觸發(fā)onblur事件菇篡，同時執(zhí)行被調(diào)用的程序。
如下代碼, 網(wǎng)頁中有用戶和密碼兩個文本框一喘。當(dāng)前光標(biāo)在用戶文本框內(nèi)時（即焦點(diǎn)在文本框）驱还，在光標(biāo)離開該文本框后（即失焦時），觸發(fā)onblur事件凸克，并調(diào)用函數(shù)message()议蟆。
內(nèi)容選中事件（onselect）
選中事件，當(dāng)文本框或者文本域中的文字被選中時萎战，觸發(fā)onselect事件咐容，同時調(diào)用的程序就會被執(zhí)行。
如下代碼,當(dāng)選中用戶文本框內(nèi)的文字時蚂维，觸發(fā)onselect 事件戳粒，并調(diào)用函數(shù)message()路狮。
文本框內(nèi)容改變事件（onchange）
通過改變文本框的內(nèi)容來觸發(fā)onchange事件，同時執(zhí)行被調(diào)用的程序蔚约。
如下代碼,當(dāng)用戶將文本框內(nèi)的文字改變后奄妨，彈出對話框“您改變了文本內(nèi)容！”苹祟。
加載事件（onload）
事件會在頁面加載完成后砸抛，立即發(fā)生，同時執(zhí)行被調(diào)用的程序苔咪。
注意：1. 加載頁面時锰悼，觸發(fā)onload事件，事件寫在<body>標(biāo)簽內(nèi)团赏。
2. 此節(jié)的加載頁面，可理解為打開一個新頁面時耐薯。
如下代碼,當(dāng)加載一個新頁面時舔清，彈出對話框“加載中，請稍等…”曲初。
卸載事件（onunload）
當(dāng)用戶退出頁面時（頁面關(guān)閉体谒、頁面刷新等），觸發(fā)onUnload事件臼婆，同時執(zhí)行被調(diào)用的程序抒痒。
注意：不同瀏覽器對onunload事件支持不同。
如下代碼,當(dāng)退出頁面時颁褂，彈出對話框“您確定離開該網(wǎng)頁嗎故响？”。
編程練習(xí)
使用JS完成一個簡單的計(jì)算器功能颁独。實(shí)現(xiàn)2個輸入框中輸入整數(shù)后彩届，點(diǎn)擊第三個輸入框能給出2個整數(shù)的加減乘除。
提示：獲取元素的值設(shè)置和獲取方法為：例：賦值：document.getElementById(“id”）.value = 1誓酒； 取值：var = document.getElementById(“id”）.value樟蠕；
任務(wù)
第一步： 創(chuàng)建構(gòu)建運(yùn)算函數(shù)count()。
第二步： 獲取兩個輸入框中的值和獲取選擇框的值靠柑。
提示：document.getElementById( id名 ).value 獲取或設(shè)置 id名的值寨辩。
第三步： 獲取通過下拉框來選擇的值來改變加減乘除的運(yùn)算法則。
提示：使用switch判斷運(yùn)算法則歼冰。
第四步： 通過 = 按鈕來調(diào)用創(chuàng)建的函數(shù)靡狞，得到結(jié)果。
注意: 使用parseInt()函數(shù)可解析一個字符串,并返回一個整數(shù)停巷。
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<script type="text/javascript">
function count(){
var txt1 = parseInt( document.getElementById('txt1').value);//獲取第一個輸入框的值
var txt2 = parseInt( document.getElementById('txt2').value);//獲取第二個輸入框的值
var select = document.getElementById('select').value;//獲取選擇框的值
var result = '';
switch (select)
{
case '+':
result = txt1 + txt2;
break;
case '-':
result = txt1 - txt2;
break;
case '*':
result = txt1 * txt2;
break;
case '/':
result = txt1 / txt2;
break;
}
document.getElementById('fruit').value = result;//設(shè)置結(jié)果輸入框的值
}
</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=' = ' onclick = "count()" />
<input type='text' id='fruit' />
</body>
</html>
