あなたと共有するために、今日はイベントJSシリーズを形成します。
フォームイベントの1種
1.1入力イベント
値は,,変化した場合、入力イベントがトリガされます。チェックボックス（）またはラジオボタン（）ユーザーが選択を変更したときのために、あなたは、このイベントをトリガすることができます。また、オープン要素のcontentEditableプロパティ、値が変化する限り、イベント入力をトリガします。
入力イベントの特徴は、このようなユーザーとして継続的にトリガ、ボタンを押すたびに、それは入力イベントをトリガします。
InputEventインタフェース継承入力イベントオブジェクト。
イベントは、のような除く変更イベント入力イベントが変更の要素の値の直後に発生し、要素がフォーカスを失ったときに変化が発生し、この時点でコンテンツが複数回変更されている可能性です。連続的な変化がある場合、それがフォーカスを失ったとき。つまり、入力イベントは一度だけ複数回変更イベントが発生をトリガーします。
以下は、例の<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);
ドロップダウンボックスのオプションを変更する際に上記のコードは、イベントは、コールバック関数inputHandlerを実行するために入力をトリガします。
1.2 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);
選択したテキストの缶selectionDirectionは、selectionEndに、したselectionStartと値が取得するevent.target要素属性。
1.3変更イベントの
値が,,変更したときに変更イベントがトリガされます。それはだ入力イベントとの最大の違いは、連続していないすべての変更が完了している唯一のトリガは、他の手をトリガーする、入力イベントが変更イベントを添付しなければなりません。具体的には、次のような状況に分け。
トリガが起動され、チェックボックス（ラジオ）またはチェックボックス（チェックボックス）。
火災時に、ユーザー提出します。例えば、以下のリストからの選択、選択完了日又はファイル入力ボックス（選択）。
ときにテキストボックスまたは変更、及び焦点の損失のトリガー要素の値。
ここでは一例です。
// 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);
}
上記の例の入力イベントを比較した場合、あなたはそれのための要素を見つけるだろう、入力および変更イベントは基本的に同じです。
1.4無効なイベント
フォーム要素の値が無効なイベントをトリガすることができ、チェック条件を満たしていない場合、ユーザーは、フォームを送信します。
<form>
<input type="text" required oninvalid="console.log('invalid input')" />
<button type="submit">提交</button>
</form>
上記のコードは、入力フレームが必要とされます。あなたは記入しない場合は、ユーザーが送信ボタンをクリックしたときに、それが取り消されて提出することをリードする、イベント無効な入力ボックスをトリガーします。
1.5リセットイベントは、イベントを提出し
、むしろフォームのメンバーで発生するよりも、両方のイベントは、フォームオブジェクトに行われたこと。
リセットイベントは（すべてのメンバーが戻ってデフォルト値に形成する）フォームがリセットされたときにトリガーされます。
フォームデータがサーバーに送信されたときにイベントが発生を提出します。フォームが送信されるため、イベントの発生はなく、ボタンオブジェクト提出する要素ではない要素であることに注意してください。
2のInputEventインタフェース
InputEventインタフェースは、主に、入力イベントの例を説明するために使用されます。インターフェースはまた、それらの特性と、インスタンスメソッドの例の数を定義し、イベントインタフェースを拡張します。
ネイティブブラウザは、オブジェクトのインスタンスを生成する、のInputEvent（）コンストラクタを提供します。
new InputEvent(type, options)
InputEventコンストラクタは2つのパラメータを受け入れることができます。最初のパラメータは、イベントの名前を表す文字列で、このパラメータは必須です。2番目のパラメータは、イベントのプロパティを設定するためのコンフィギュレーション・オブジェクト・インスタンスであり、パラメータはオプションです。構成オブジェクトの属性フィールドイベントのコンストラクタの設定に加えてオプションである次のフィールドを設定することができます。
inputType：タイプ（下記参照）を表す文字列が変更されます。
データ：挿入された文字列を表す文字列。挿入（DELETEなど）は、文字列が存在しない場合は、null、または空の文字列が返されます。
dataTransferは：通常、入力にのみ有効な属性リッチテキスト入力ボックスを受け付けdataTransferオブジェクトのインスタンスを返します。
InputEventインスタンスは、主に3つの属性、属性の三つの例は、読み取り専用で上記の属性。
（1）InputEvent.data
InputEvent.dataプロパティは、コンテンツの変更を表す文字列を返します。
// HTML 代码如下
// <input type="text" id="myInput">
var input = document.getElementById('myInput');
input.addEventListener('input', myFunction, false);
function myFunction(e) {
console.log(e.data);
}
上記のコードで、もし入力ボックスABCへのコンソール出力は、次の出力ラインB、及び、出力次線cの手動入力。[選択] ABC、一度にそれらを削除し、コンソール意志出力nullまたは空の文字列。
（2）InputEvent.inputType
InputEvent.inputTypeプロパティが変更生じる文字列の種類を表す文字列を返します。
次のように一般的なケースでは、Chromeブラウザは、戻り値があります。完全なリストについてはマニュアルを参照してくださいすることができます。
手動で挿入テキスト：insertTextは
insertFromPaste：テキストを挿入するために貼り付け
、削除、後方を：deleteContentBackwardは
前方に削除します。deleteContentForward
（3）InputEvent.dataTransfer
InputEvent.dataTransferプロパティはれるDataTransferインスタンスを返します。テキストボックスに貼り付けた場合、このプロパティ（insertFromPaste）またはコンテンツ（insertFromDrop）をドラッグするには、唯一の有効な受け入れ。
イベントのJSシリーズについて - フォームイベント、あなたはどのくらいを学びますか？コメントは、コメント領域に歓迎されています！
