(96)Wangdao.com_第二十九天_表單事件
表單事件
input 事件 select 事件 change 事件 invalid 事件 reset 事件 submit 事件
input 事件
<input>、<select>、<textarea>的值發生變化時觸發
對於 複選框(<input type=checkbox>)
對於開啟 contenteditable 屬性的元素,只要值發生變化,也會觸發 input 事件
- 特點:
連續觸發,比如使用者每按下一次按鍵,就會觸發一次 input 事件
在元素的值發生變化後立即發生
有連續變化,input 事件會觸發多次,而 change 事件只在失去焦點時觸發一次
繼承了 InputEvent 介面
select 事件
當在<input>、<textarea>裡面選中文字時觸發
-
//
選中的文字可以通過 event.target 元素的 selectionDirection、selectionEnd、selectionStart 和 value
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); }
invalid 事件
使用者提交表單時,如果表單元素的值不滿足校驗條件,就會觸發 invalid 事件
-
// 輸入框是必填的。如果不填,使用者點選按鈕提交時,就會觸發輸入框的invalid事件,導致提交被取消 <form> <input type="text" required oninvalid="console.log('invalid input')" /> <button type="submit">提交</button> </form>
reset 事件
這個事件發生在表單物件 <form> 上,而不是發生在表單的成員上
當表單重置(所有表單成員變回預設值)時觸發
submit 事件
當表單資料向伺服器提交時觸發。
注意,submit事件的發生物件是 <form> 元素,而不是<button>元素,因為提交的是表單,而不是按鈕
瀏覽器原生提供 InputEvent() 建構函式, 用來生成例項物件
InputEvent介面主要用來描述 input 事件的例項。
該介面繼承了 Event 介面,還定義了一些自己的例項屬性和例項方法。
-
new InputEvent(type, options)
第一個引數 是字串,表示事件名稱,該引數是必需的。
第二個引數 是一個配置物件,用來設定事件例項的屬性,該引數是可選的。
配置物件的欄位除了 Event 建構函式的配置屬性,還可以設定下面的欄位,這些欄位都是可選的
- inputType 字串,表示發生變更的型別(詳見下文)。
- data 字串,表示插入的字串。如果沒有插入的字串(比如刪除操作),則返回 null 或空字串。
- dataTransfer 返回一個 DataTransfer 物件例項,該屬性通常只在輸入框接受富文字輸入時有效。
event.data
返回一個字串,表示變動的內容
-
// HTML 程式碼如下 // <input type="text" id="myInput"> var input = document.getElementById('myInput'); input.addEventListener('input', myFunction, false); function myFunction(e) { console.log(e.data); }
event.inputType
- 返回一個字串,表示字串發生變更的型別
- 手動插入文字 insertText
- 貼上插入文字 insertFromPaste
- 向後刪除 deleteContentBackward
- 向前刪除 deleteContentForward
3
3
3
3
3
3
3
3
3
change 事件