表單事件 · JavaScript 教程

# 表單事件 ## 表單事件的種類 ### input 事件 `input`事件當`<input>`、`<select>`、`<textarea>`的值發生變化時觸發。對于復選框（`<input type=checkbox>`）或單選框（`<input type=radio>`），用戶改變選項時，也會觸發這個事件。另外，對于打開`contenteditable`屬性的元素，只要值發生變化，也會觸發`input`事件。 `input`事件的一個特點，就是會連續觸發，比如用戶每按下一次按鍵，就會觸發一次`input`事件。 `input`事件對象繼承了`InputEvent`接口。該事件跟`change`事件很像，不同之處在于`input`事件在元素的值發生變化后立即發生，而`change`在元素失去焦點時發生，而內容此時可能已經變化多次。也就是說，如果有連續變化，`input`事件會觸發多次，而`change`事件只在失去焦點時觸發一次。下面是`<select>`元素的例子。 ```javascript /* 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); ``` 上面代碼中，改變下拉框選項時，會觸發`input`事件，從而執行回調函數`inputHandler`。 ### select 事件 `select`事件當在`<input>`、`<textarea>`里面選中文本時觸發。 ```javascript // 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); ``` 選中的文本可以通過`event.target`元素的`selectionDirection`、`selectionEnd`、`selectionStart`和`value`屬性拿到。 ### change 事件 `change`事件當`<input>`、`<select>`、`<textarea>`的值發生變化時觸發。它與`input`事件的最大不同，就是不會連續觸發，只有當全部修改完成時才會觸發，另一方面`input`事件必然伴隨`change`事件。具體來說，分成以下幾種情況。 - 激活單選框（radio）或復選框（checkbox）時觸發。 - 用戶提交時觸發。比如，從下列列表（select）完成選擇，在日期或文件輸入框完成選擇。 - 當文本框或`<textarea>`元素的值發生改變，并且喪失焦點時觸發。下面是一個例子。 ```javascript // 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); } ``` 如果比較一下上面`input`事件的例子，你會發現對于`<select>`元素來說，`input`和`change`事件基本是等價的。 ### invalid 事件用戶提交表單時，如果表單元素的值不滿足校驗條件，就會觸發`invalid`事件。 ```html <form> <input type="text" required oninvalid="console.log('invalid input')" /> <button type="submit">提交</button> </form> ``` 上面代碼中，輸入框是必填的。如果不填，用戶點擊按鈕提交時，就會觸發輸入框的`invalid`事件，導致提交被取消。 ### reset 事件，submit 事件這兩個事件發生在表單對象`<form>`上，而不是發生在表單的成員上。 `reset`事件當表單重置（所有表單成員變回默認值）時觸發。 `submit`事件當表單數據向服務器提交時觸發。注意，`submit`事件的發生對象是`<form>`元素，而不是`<button>`元素，因為提交的是表單，而不是按鈕。 ## InputEvent 接口 `InputEvent`接口主要用來描述`input`事件的實例。該接口繼承了`Event`接口，還定義了一些自己的實例屬性和實例方法。瀏覽器原生提供`InputEvent()`構造函數，用來生成實例對象。 ```javascript new InputEvent(type, options) ``` `InputEvent`構造函數可以接受兩個參數。第一個參數是字符串，表示事件名稱，該參數是必需的。第二個參數是一個配置對象，用來設置事件實例的屬性，該參數是可選的。配置對象的字段除了`Event`構造函數的配置屬性，還可以設置下面的字段，這些字段都是可選的。 - `inputType`：字符串，表示發生變更的類型（詳見下文）。 - `data`：字符串，表示插入的字符串。如果沒有插入的字符串（比如刪除操作），則返回`null`或空字符串。 - `dataTransfer`：返回一個 DataTransfer 對象實例，該屬性通常只在輸入框接受富文本輸入時有效。 `InputEvent`的實例屬性主要就是上面三個屬性，這三個實例屬性都是只讀的。 **（1）InputEvent.data** `InputEvent.data`屬性返回一個字符串，表示變動的內容。 ```javascript // HTML 代碼如下 // <input type="text" id="myInput"> var input = document.getElementById('myInput'); input.addEventListener('input', myFunction, false); function myFunction(e) { console.log(e.data); } ``` 上面代碼中，如果手動在輸入框里面輸入`abc`，控制臺會先輸出`a`，再在下一行輸出`b`，再在下一行輸出`c`。然后選中`abc`，一次性將它們刪除，控制臺會輸出`null`或一個空字符串。 **（2）InputEvent.inputType** `InputEvent.inputType`屬性返回一個字符串，表示字符串發生變更的類型。對于常見情況，Chrome 瀏覽器的返回值如下。完整列表可以參考[文檔](https://w3c.github.io/input-events/index.html#dom-inputevent-inputtype)。 - 手動插入文本：`insertText` - 粘貼插入文本：`insertFromPaste` - 向后刪除：`deleteContentBackward` - 向前刪除：`deleteContentForward` **（3）InputEvent.dataTransfer** `InputEvent.dataTransfer`屬性返回一個 DataTransfer 實例。該屬性只在文本框接受粘貼內容（insertFromPaste）或拖拽內容（`insertFromDrop`）時才有效。