事件驅動三要素
事件源：即觸發事件的元素
事件：被JavaScript檢測到的行為。例如：
鼠標點擊
鍵盤按鍵
選輸入框
事件處理函數：事件發生時要進行的操作，又叫做“事件句柄”或“事件監聽器”
?
事件分類：
鼠標事件： ? ?click 鼠標點擊操作
dblclick ??鼠標雙擊操作
mousedown ? ?按下鼠標按鍵
mousemove 鼠標指針在元素上方移動
mouseover ? ? 鼠標指針進入元素
mouseout· ?鼠標指針移出元素
鍵盤事件： keydown ?按下鍵盤按鍵
keyup ? ? ?抬起鍵盤按鍵
keypress ? ? ? ?按下或按住鍵盤按鍵
表單事件： ? focus ? ? ? ? ? ? ?input獲得焦點
blur ?input失去焦點
change ?更改input元素的內容
頁面事件： ? load ?頁面加載完成
?
事件綁定
HTML標簽的事件屬性
1 <input type = "button" id = "btn" value = "點擊" ouclick = "test()"/>
?1 function(){ 2 //.... 3 }?
DOM標準的事件
通過on加事件類型的方式去綁定事件，也屬于DOM 0 級事件，例：
1 <input type="button" id = "btn" value= "點擊"/> 2 3 //方式一： 4 btn.onclick = function(){ 5 //... 6 } 7 8 9 //方式二： 10 function test(){ 11 //... 12 } 13 btn.onclick = test;
事件監聽器
DOM提供了事件監聽器，可以同時綁定或刪除多個事件，并且具有多個事件處理函數。屬于DOM 2級事件
綁定：
?1 事件源.addEventListener(eventName, functionName, boolean);?
刪除：
?1 事件源.removeEventListener(eventName, functionName, boolean);?
參數說明：
eventName:為元素指定具體的事件名稱（例如單擊事件是click等）；
functionName: 綁定事件的處理函數；
boolean:布爾值，默認為false。
綁定：
1 <input type ="button" id = "btn" value = "點擊"/> 2 3 btn.addEventListener('click'.function(){ 4 console.log('xxxxx'); 5 },false);
刪除：
1 function handle(){ 2 console.log('xxx'); 3 } 4 //綁定事件 5 btn.addEventListener("click",handle,false); 6 //刪除事件 7 btn.removeEventListener("click",handle,false);
addEventListener() 方法還可以為指定一個元素綁定一個事件同時具有多個處理函數。如下代碼示例:
1 btn.addEventListener('click'.function(){ 2 console.log('第一次執行'); 3 },false); 4 btn.addEventListener('click'.function(){ 5 console.log('第二次執行'); 6 },false);
?
)
