事件驅動三要素

事件源：即觸發事件的元素

事件：被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

刪除：

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);

Event 事件 - 基礎