91大闸蟹国产丝袜片,精品国产亚洲福利一区二区

表單事件的種類

input 事件

input事件當(dāng)<input>、<select>、<textarea>的值發(fā)生變化時(shí)觸發(fā)。對(duì)于復(fù)選框（<input type=checkbox>）或單選框（<input type=radio>），用戶改變選項(xiàng)時(shí)，也會(huì)觸發(fā)這個(gè)事件。另外，對(duì)于打開contenteditable屬性的元素，只要值發(fā)生變化，也會(huì)觸發(fā)input事件。

input事件的一個(gè)特點(diǎn)，就是會(huì)連續(xù)觸發(fā)，比如用戶每按下一次按鍵，就會(huì)觸發(fā)一次input事件。

input事件對(duì)象繼承了InputEvent接口。

該事件跟change事件很像，不同之處在于input事件在元素的值發(fā)生變化后立即發(fā)生，而change在元素失去焦點(diǎn)時(shí)發(fā)生，而內(nèi)容此時(shí)可能已經(jīng)變化多次。也就是說，如果有連續(xù)變化，input事件會(huì)觸發(fā)多次，而change事件只在失去焦點(diǎn)時(shí)觸發(fā)一次。

下面是<select>元素的例子。

/* 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);

上面代碼中，改變下拉框選項(xiàng)時(shí)，會(huì)觸發(fā)input事件，從而執(zhí)行回調(diào)函數(shù)inputHandler。

select 事件

select事件當(dāng)在<input>、<textarea>里面選中文本時(shí)觸發(fā)。

// 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事件當(dāng)<input>、<select>、<textarea>的值發(fā)生變化時(shí)觸發(fā)。它與input事件的最大不同，就是不會(huì)連續(xù)觸發(fā)，只有當(dāng)全部修改完成時(shí)才會(huì)觸發(fā)，另一方面input事件必然伴隨change事件。具體來說，分成以下幾種情況。

激活單選框（radio）或復(fù)選框（checkbox）時(shí)觸發(fā)。
用戶提交時(shí)觸發(fā)。比如，從下列列表（select）完成選擇，在日期或文件輸入框完成選擇。
當(dāng)文本框或<textarea>元素的值發(fā)生改變，并且喪失焦點(diǎn)時(shí)觸發(fā)。

下面是一個(gè)例子。

// 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事件的例子，你會(huì)發(fā)現(xiàn)對(duì)于<select>元素來說，input和change事件基本是等價(jià)的。

invalid 事件

用戶提交表單時(shí)，如果表單元素的值不滿足校驗(yàn)條件，就會(huì)觸發(fā)invalid事件。

<form>
  <input type="text" required oninvalid="console.log('invalid input')" />
  <button type="submit">提交</button>
</form>

上面代碼中，輸入框是必填的。如果不填，用戶點(diǎn)擊按鈕提交時(shí)，就會(huì)觸發(fā)輸入框的invalid事件，導(dǎo)致提交被取消。

reset 事件，submit 事件

這兩個(gè)事件發(fā)生在表單對(duì)象<form>上，而不是發(fā)生在表單的成員上。

reset事件當(dāng)表單重置（所有表單成員變回默認(rèn)值）時(shí)觸發(fā)。

submit事件當(dāng)表單數(shù)據(jù)向服務(wù)器提交時(shí)觸發(fā)。注意，submit事件的發(fā)生對(duì)象是<form>元素，而不是<button>元素，因?yàn)樘峤坏氖潜韱?，而不是按鈕。

InputEvent 接口

InputEvent接口主要用來描述input事件的實(shí)例。該接口繼承了Event接口，還定義了一些自己的實(shí)例屬性和實(shí)例方法。

瀏覽器原生提供InputEvent()構(gòu)造函數(shù)，用來生成實(shí)例對(duì)象。

new InputEvent(type, options)

InputEvent構(gòu)造函數(shù)可以接受兩個(gè)參數(shù)。第一個(gè)參數(shù)是字符串，表示事件名稱，該參數(shù)是必需的。第二個(gè)參數(shù)是一個(gè)配置對(duì)象，用來設(shè)置事件實(shí)例的屬性，該參數(shù)是可選的。配置對(duì)象的字段除了Event構(gòu)造函數(shù)的配置屬性，還可以設(shè)置下面的字段，這些字段都是可選的。

inputType：字符串，表示發(fā)生變更的類型（詳見下文）。
data：字符串，表示插入的字符串。如果沒有插入的字符串（比如刪除操作），則返回null或空字符串。
dataTransfer：返回一個(gè) DataTransfer 對(duì)象實(shí)例，該屬性通常只在輸入框接受富文本輸入時(shí)有效。

InputEvent的實(shí)例屬性主要就是上面三個(gè)屬性，這三個(gè)實(shí)例屬性都是只讀的。

（1）InputEvent.data

InputEvent.data屬性返回一個(gè)字符串，表示變動(dòng)的內(nèi)容。

// HTML 代碼如下
// <input type="text" id="myInput">
var input = document.getElementById('myInput');
input.addEventListener('input', myFunction, false);

function myFunction(e) {
  console.log(e.data);
}

上面代碼中，如果手動(dòng)在輸入框里面輸入abc，控制臺(tái)會(huì)先輸出a，再在下一行輸出b，再在下一行輸出c。然后選中abc，一次性將它們刪除，控制臺(tái)會(huì)輸出null或一個(gè)空字符串。

（2）InputEvent.inputType

InputEvent.inputType屬性返回一個(gè)字符串，表示字符串發(fā)生變更的類型。

對(duì)于常見情況，Chrome 瀏覽器的返回值如下。完整列表可以參考文檔。

手動(dòng)插入文本：insertText
粘貼插入文本：insertFromPaste
向后刪除：deleteContentBackward
向前刪除：deleteContentForward

（3）InputEvent.dataTransfer

InputEvent.dataTransfer屬性返回一個(gè) DataTransfer 實(shí)例。該屬性只在文本框接受粘貼內(nèi)容（insertFromPaste）或拖拽內(nèi)容（insertFromDrop）時(shí)才有效。

JavaScript 表單事件