Today to share with you form events JS series.
1 kind of form events
1.1 input event
input event is triggered when the value ,, changes. For checkboxes () or radio button () when the user changes the selection, you can trigger this event. In addition, the open element contenteditable property, as long as the value changes, the event will trigger input.
A feature of input events is continuously triggers, such as the user each time you press the button, it will trigger an input event.
input event object inherits InputEvent interface.
The event is like, except that with the change event input event occurs immediately after the value of the element of change, and change occurs when the element loses focus, and the content at this time may have changed several times. That is, if there is continuous change, input events will trigger multiple times change event fires only once when it loses focus.
The following are examples <select> element.
/* 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);
The above code when changing the drop-down box option, the event will trigger input to perform the callback function inputHandler.
1.2 select event
select event fires when the <input>, <textarea> inside the selected text.
// 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);
Selected text can selectionDirection, selectionEnd, selectionStart and value attributes event.target element to get.
1.3 change event
change event is triggered when the value ,, changes. It's the biggest difference with the input event is not continuous trigger only when all changes are complete will trigger the other hand, input events must be accompanied by a change event. Specifically, divided into the following situations.
When the trigger is activated checkbox (radio) or checkboxes (checkbox).
Fires when the user submits. For example, from the following list (select) selection, selection completion date or file input box.
When the value of the trigger element of a text box or changed, and loss of focus.
Below is an example.
// HTML 代码如下
// <select size="1" οnchange="changeEventHandler(event);">
// <option>chocolate</option>
// <option>strawberry</option>
// <option>vanilla</option>
// </select>
function changeEventHandler(event) {
console.log(event.target.value);
}
If the above example input events compare, you will find the elements for it, input and change events is basically equivalent.
1.4 invalid event
when the user submits the form, if the value of the form element does not meet the check condition can trigger the invalid event.
<form>
<input type="text" required oninvalid="console.log('invalid input')" />
<button type="submit">提交</button>
</form>
The above code, the input frame is required. If you do not fill, when the user clicks the submit button, it will trigger event invalid input box, leading to submit been canceled.
1.5 reset event, submit the event
that both events took place on the form object, rather than occurring on members of the form.
reset event is triggered when the form is reset (all members form back to the default value).
submit event fires when the form data is submitted to the server. Note that the occurrence of the event is the object submit element, not the element, because the form is submitted, instead button.
2 InputEvent Interface
InputEvent interface is mainly used to describe examples of input events. The interface extends the Event interface, also defines a number of examples of their properties and instance methods.
Native browser provides the InputEvent () constructor, to generate an object instance.
new InputEvent(type, options)
InputEvent constructor can accept two parameters. The first parameter is a string representing the name of the event, this parameter is required. The second parameter is a configuration object instance to set the properties of the event, the parameter is optional. In addition to configuring the configuration object attribute fields Event constructor can set the following fields which are optional.
inputType: string representing the type (see below) is changed.
data: string representing the string inserted. If there is no character string (such as delete) inserted, null, or empty string is returned.
dataTransfer: Returns a DataTransfer object instance, which usually accepts only valid attribute rich text input box in the input.
InputEvent instance attributes mainly above three attributes, three examples of attributes are read-only.
(. 1) InputEvent.data
InputEvent.data property returns a string representing the content changes.
// HTML 代码如下
// <input type="text" id="myInput">
var input = document.getElementById('myInput');
input.addEventListener('input', myFunction, false);
function myFunction(e) {
console.log(e.data);
}
In the above code, if the manual input in the input box which abc, console output to a, then the next output line B, and then output the next line c. Then select abc, remove them at one time, the console will output a null or empty string.
(2) InputEvent.inputType
InputEvent.inputType property returns a string representing the type of change occurring strings.
For the common case, Chrome browser, the return value is as follows. For a complete list can refer to the documentation.
Manually insert text: insertText
Paste to insert the text: insertFromPaste
delete backwards: deleteContentBackward
delete forward: deleteContentForward
(. 3) InputEvent.dataTransfer
InputEvent.dataTransfer property returns a DataTransfer instance. This property (insertFromPaste) or dragging the content (insertFromDrop) accepts only valid when pasted in the text box.
About JS series of events - form events, you learn how much? Comments are welcome in the comments area!
