Event 事件 - 基礎

事件驅動三要素

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

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