技術標籤：前端

滑鼠事件

型別1

1. click 滑鼠單擊時觸發
2. dblclick 滑鼠雙擊時觸發
   總結
3. 雙擊事件是由兩次單擊完成，所以雙擊事件執行的時候必定會觸發單擊事件。
4. 一般情況下，單擊雙擊分開執行，不會一起執行。

型別2

1. mousedown 滑鼠按下時觸發
2. mouseup 按下滑鼠放鬆時觸發

型別3

1. mouseenter 滑鼠進入時觸發
2. mouseleave 滑鼠移出時觸發
3. hover (over,out) 滑鼠進入和退出時觸發兩個函式 ，相當於mouseenter和mouseleave

型別4

1. mouseover 滑鼠進入指定元素及其子元素時觸發
2. mouseout 滑鼠移出指定元素及其子元素時觸發
3. mousemove 在DOM內部移動時發生這個事件
   總結：很多搗蛋程式通過mousemove做出來的。
   拖拽檔案上傳用到！

型別5

1. scroll 當滾動這個元素時會發生這個事件

鍵盤事件

型別1

1. keydown 當鍵盤或者按鈕被按下時，觸發keydown事件。
   總結：
2. 有時候我們通過獲取key值判斷按下什麼鍵
3. 可以通過獲取鍵位獲取輸入什麼鍵
4. 通過keycode：ASCII值判斷

型別2

1. keyup 當按鈕鬆開時，觸發keyup事件，發生在當前獲得焦點的元素上。
   總結：
2. 現在的瀏覽器基本上可以使用keydown和keyup，發生在當前獲得焦點的元素上
3. 舊瀏覽器保留一個keypress事件

型別3

1. keypress 當鍵盤或者按鈕按下時，發生keypress事件
   
   總結：
2. 獨特在於必須輸入內容才會觸發
3. 比如輸入法、回退，Ctrl， alt不會觸發的
4. 現在版本和keypress keydown幾乎沒有區別

其他事件

1. ready() 當DOM載入就緒可以查詢或者操縱時繫結一個要執行的函式

//頁面就緒函式
//原始格式
$(document).ready(function(){....});

//縮寫形式
$().ready(function(){....});

//再縮寫
$(function(){});

2. resize() 當瀏覽器調整瀏覽器視窗大小時，觸發事件

$(window).resize(function(){
    console.log($(this));
 

 });

3. focus()/blur() 當元素獲得或者失去焦點時觸發事件，適用於input、textarea

4. change() 當元素得值發生改變時，發生change事件
   • 當focus()、blur()、change()一起時，觸發的先後順序
   
   

5. select() 當textarea或者文字型別的input文字被 選擇時，會發生select事件
   
   總結：只有可編輯的文字和文字域等可以產生select事件

6. submit() 當提交表單時，發生submit事件
   • submit具有三個功能
   a.提交表單（讓普通按鈕具有提交功能）
   b.阻止提交表單
   c.表單驗證

總結：
1.button不在form就是普通按鈕
2. button在form中，相當於submit提交按鈕
3. button是html5新增的
4. 在ie中就是普通按鈕
5. 在非ie中就是提交按鈕

事件引數

Event – 我們需要通過event獲取滑鼠位置和鍵盤位置，否則監聽事件無意義
所有事件都會傳入event物件作為引數，可以從event物件上獲取很多資訊；

事件繫結和取消

1. on(events,[selector],[data],fn) 在選擇元素上繫結一個或多個事件的事件處理函式
2. add()方法表示將元素新增到已存在的元素組合中
   a. 語法：$(選擇器).add(element,context)
3. off(events,[selector],[data],fn) 在選擇元素上移除一個或者多個事件處理函式
4. one(type,[data],fn) 為每一個匹配元素的特定事件（比如click）繫結一個一次性的時間處理函式