站長(zhǎng)資訊網(wǎng)
在javascript中，事件由事件源、事件類型和事件處理程序三個(gè)部分構(gòu)成?！笆录础敝赣|發(fā)事件的元素，“事件類型”指事件的觸發(fā)方式，“事件處理程序”指事件觸發(fā)后要執(zhí)行的代碼（函數(shù)形式）。
本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
什么是事件?
事件是指可以被JavaScript偵測(cè)到的行為，是一種“觸發(fā)-響應(yīng)”的機(jī)制。這些行為指的就是頁面的加載、鼠標(biāo)的單擊/雙擊、鼠標(biāo)指針滑某個(gè)區(qū)域等具體的動(dòng)作，它對(duì)實(shí)現(xiàn)頁面的交互效果起著非常重要的作用。
事件由事件源、事件類型和事件處理程序3部分構(gòu)成，又被稱為“事件三要素”。
事件三要素
-
事件源：觸發(fā)(被)事件的元素
-
事件類型：事件的觸發(fā)方式(例如鼠標(biāo)點(diǎn)擊或鍵盤點(diǎn)擊)
-
事件處理程序：事件觸發(fā)后要執(zhí)行的代碼(函數(shù)形式)
以上的三個(gè)要素可以簡(jiǎn)單理解為“誰觸發(fā)了事件”、“觸發(fā)了什么事件”、“觸發(fā)了事件之后要做什么”。
示例：通過點(diǎn)擊按鈕改變div的顏色
-
事件源：按鈕元素
-
事件類型：鼠標(biāo)點(diǎn)擊
-
事件處理程序：test(eventObj)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠標(biāo)事件</title> <script type="text/javascript"> //js如何訪問元素的style屬性，進(jìn)行樣式修改 function test(eventObj) { //怎么知道button1被按，還是button2被按下 //window.alert(eventObj.value); if(eventObj.value == "黑色") { //獲取div1 var div1 = document.getElementById("div1"); div1.style.background = "black"; } else if(eventObj.value == "紅色") { var div1 = document.getElementById("div1"); div1.style.background = "red"; } } </script> </head> <body> <div id="div1" style="width: 400px; height: 300px; background: red;">div1</div> <input type="button" value="黑色" onclick="test(this)" /> <input type="button" value="紅色" onclick="test(this)" /> </body> </html>
【
