## 一、鼠標事件的種類 鼠標事件指與鼠標相關的事件，具體的事件主要有以下一些。 * `click`：按下鼠標（通常是按下主按鈕）時觸發。 * `dblclick`：在同一個元素上雙擊鼠標時觸發。 * `mousedown`：按下鼠標鍵時觸發。 * `mouseup`：釋放按下的鼠標鍵時觸發。 * `mousemove`：當鼠標在一個節點內部移動時觸發。當鼠標持續移動時，該事件會連續觸發。 * `mouseenter`：鼠標進入一個節點時觸發，進入子節點不會觸發這個事件。 * `mouseover`：鼠標進入一個節點時觸發，進入子節點會再一次觸發這個事件。 * `mouseout`：鼠標離開一個節點時觸發，離開父節點也會觸發這個事件。 * `mouseleave`：鼠標離開一個節點時觸發，離開父節點不會觸發這個事件。 * `contextmenu`：按下鼠標右鍵時（上下文菜單出現前）觸發，或者按下“上下文菜單鍵”時觸發。 * `wheel`：滾動鼠標的滾輪時觸發。 `click`事件指的是，用戶在同一個位置先完成`mousedown`動作，再完成`mouseup`動作。因此，觸發順序是，`mousedown`首先觸發，`mouseup`接著觸發，`click`最后觸發。 `dblclick`事件則會在`mousedown`、`mouseup`、`click`之后觸發。 `mouseover`事件和`mouseenter`事件，都是鼠標進入一個節點時觸發。兩者的區別是，`mouseenter`事件只觸發一次，而只要鼠標在節點內部移動，`mouseover`事件會在子節點上觸發多次。 `mouseout`事件和`mouseleave`事件，都是鼠標離開一個節點時觸發。兩者的區別是，在父元素內部離開一個子元素時，`mouseleave`事件不會觸發，而`mouseout`事件會觸發。 ## 二、鍵盤事件的種類 鍵盤事件由用戶擊打鍵盤觸發，主要有`keydown`、`keypress`、`keyup`三個事件。 * `keydown`：按下鍵盤時觸發。 * `keypress`：按下有值的鍵時觸發，即按下 Ctrl、Alt、Shift、Meta 這樣無值的鍵，這個事件不會觸發。對于有值的鍵，按下時先觸發`keydown`事件，再觸發這個事件。 * `keyup`：松開鍵盤時觸發該事件。 ## 三、表單事件的種類 ### 3.1 input 事件 `input`事件當`<input>`、`<select>`、`<textarea>`的值發生變化時觸發。對于復選框（`<input type=checkbox>`）或單選框（`<input type=radio>`），用戶改變選項時，也會觸發這個事件。`input`事件的一個特點，就是會連續觸發，比如用戶每按下一次按鍵，就會觸發一次`input`事件。 ~~~ /* HTML 代碼如下 <select id="mySelect"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> */ function inputHandler(e) { console.log(e.target.value) } var mySelect = document.querySelector('#mySelect'); mySelect.addEventListener('input', inputHandler); ~~~ ### 3.2 select 事件 `select`事件當在`<input>`、`<textarea>`里面選中文本時觸發。 ~~~ // HTML 代碼如下 // <input id="test" type="text" value="Select me!" /> var elem = document.getElementById('test'); elem.addEventListener('select', function (e) { console.log(e.type); // "select" }, false); ~~~ ### 3.3 change 事件 `change`事件當`<input>`、`<select>`、`<textarea>`的值發生變化時觸發。它與`input`事件的最大不同，就是不會連續觸發，只有當全部修改完成時才會觸發，另一方面`input`事件必然伴隨`change`事件。 * 激活單選框（radio）或復選框（checkbox）時觸發。 * 用戶提交時觸發。比如，從下列列表（select）完成選擇，在日期或文件輸入框完成選擇。 * 當文本框或`<textarea>`元素的值發生改變，并且喪失焦點時觸發。 ~~~ // HTML 代碼如下 // <select size="1" onchange="changeEventHandler(event);"> // <option>chocolate</option> // <option>strawberry</option> // <option>vanilla</option> // </select> function changeEventHandler(event) { console.log(event.target.value); } ~~~ ### 3.4 invalid 事件 用戶提交表單時，如果表單元素的值不滿足校驗條件，就會觸發`invalid`事件。 ~~~ <form> <input type="text" required oninvalid="console.log('invalid input')" /> <button type="submit">提交</button> </form> ~~~ 上面代碼中，輸入框是必填的。如果不填，用戶點擊按鈕提交時，就會觸發輸入框的`invalid`事件，導致提交被取消。 ### 3.5 reset 事件，submit 事件 這兩個事件發生在表單對象`<form>`上，而不是發生在表單的成員上。 `reset`事件當表單重置（所有表單成員變回默認值）時觸發。 `submit`事件當表單數據向服務器提交時觸發。 注意，`submit`事件的發生對象是`<form>`元素，而不是`<button>`元素，因為提交的是表單，而不是按鈕。