事件驅動三要素

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

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

?

轉載于:https://www.cnblogs.com/amag/p/7471139.html

總結

以上是生活随笔為你收集整理的Event 事件 - 基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。