DOM

：

：

HTMLElement：input イベント

　編集：2022.10.02 by T.A.

[Edge]。→、

要素の内容が変更された時に発生します。

対象となるのは、<input>、<select>、<textarea> 要素、contenteditable を有効にした要素、designMode を有効にした要素です。

バブリング あり
キャンセル 不可
インターフェイス InputEvent または Event
イベント ハンドラー プロパティ oninput

contenteditable や designMode の場合、イベントのターゲットは編集ホストです。これらのプロパティが複数の要素に適用された場合、編集ホストは親が編集可能ではない直近の祖先要素になります。

<input> 要素が type=checkbox または type=radio 型であった場合、HTML5 仕様書によれば、input イベントはユーザーがコントロールの状態を変更するたびに発生することになっています。しかし、歴史的に常にそうなるとは限りません。互換性に注意するか、これらの種類の要素では、代わりに change イベントを使用するようにするかしてください。

インターフェイスは、<textarea> およびテキスト入力を受け入れる <input> 要素（type=text、type=tel、など）では InputEvent。それ以外の場合は Event になります。

Note： input イベントは、要素の value の値が変化するたびに発生します。change イベントの場合は、キーが押されたり、選択肢から値が選択されたりするような、値が決定したときに発生します。

例

HTML： 

<INPUT id=IdInput type=text><BR>
<INPUT id=IdInput2 type=checkbox><BR>
<DIV id=IdDiv contenteditable>DIV要素。ここで編集して…</DIV>
<SPAN id=IdLog></SPAN>

JavaScript： 

function Job(eve){
  D=eve; //＝[object]：[object InputEvent]

詳細	//isTrusted＝[boolean]：true
	//data＝[string]：あ
	//isComposing＝[boolean]：false
	//inputType＝[string]：insertText
	//dataTransfer＝[object]：null
	//getTargetRanges＝[function]：function getTargetRanges() { [native code] }
	//view＝[object]：null
	//detail＝[number]：0
	//sourceCapabilities＝[object]：null
	//which＝[number]：0
	//initUIEvent＝[function]：function initUIEvent() { [native code] }
	//type＝[string]：input
	//target＝[object]：[object HTMLInputElement]
	//currentTarget＝[object]：null
	//eventPhase＝[number]：0
	//bubbles＝[boolean]：true
	//cancelable＝[boolean]：false
	//defaultPrevented＝[boolean]：false
	//composed＝[boolean]：true
	//…


  let E=eve.target;
  IdLog.innerHTML=IdLog.innerHTML+"●";
}
IdInput.oninput=Job;
IdInput2.oninput=Job;
IdDiv.oninput=Job;

文字が確定前でもキーで文字入力のたびにイベントが発生するようです。

DIV要素でのeveの内容は、 

//eve＝[object]：[object InputEvent]

詳細//isTrusted＝[boolean]：true
//data＝[string]：あ
//isComposing＝[boolean]：false
//inputType＝[string]：insertText
//dataTransfer＝[object]：null
//getTargetRanges＝[function]：function getTargetRanges() { [native code] }
//view＝[object]：null
//detail＝[number]：0
//sourceCapabilities＝[object]：null
//which＝[number]：0
//initUIEvent＝[function]：function initUIEvent() { [native code] }
//type＝[string]：input
//target＝[object]：[object HTMLDivElement]
//currentTarget＝[object]：null
//eventPhase＝[number]：0
//bubbles＝[boolean]：true
//cancelable＝[boolean]：false
//defaultPrevented＝[boolean]：false
//composed＝[boolean]：true
//

INPUT要素（checkbox）でのeveは、 

//eve＝[object]：[object Event]

詳細//isTrusted＝[boolean]：true
//type＝[string]：input
//target＝[object]：[object HTMLInputElement]
//currentTarget＝[object]：null
//eventPhase＝[number]：0
//bubbles＝[boolean]：true
//cancelable＝[boolean]：false
//defaultPrevented＝[boolean]：false
//composed＝[boolean]：true
//…
テスト