HTML入力で値が変更されたときにリスナーイベントを追加することの簡単な分析

達成される効果
多くの場合、入力ボックスの値の変化をリアルタイムで監視し、ブラウザを誘導してウェブサイトのユーザーエクスペリエンスを向上させるための即時のアクションを実行できるようにします。例えば、入力ボックスに入力されたバイト数を瞬時に表示したり、入力値を瞬時に読み取って検索を誘導したり、これが Google の関連検索効果です。
瞬間を捉えることができれば、多くのことができるようになります。
知っておくべきこと
まず、 onchangeとonpropertychangeの違いを理解する必要があります。

IE では、HTML 要素のプロパティが変更されると、onpropertychange を通じて即座にキャプチャできます。
onchange 属性値が変更された場合、イベントをアクティブ化するには、現在の要素もフォーカスを失う必要があります (onblur)。

これを理解した後、onpropertychange の効果が目的のものであることがわかりますが、残念ながら、これは IE でのみ機能します。 onpropertychange を置き換える別の機会を見つけることはできますか?

情報を読んだ後、 oninputイベントを使用して他のブラウザでも同じ効果を実現できることを知りました。素晴らしいですね。IE ブラウザを区別するだけです。

oninputの使用

次に、oninputの使い方を見てみましょう。
登録時間をページ上に直接記入する場合は、次のようにします。
<、input type="text" name="textfield" oninput="alert(this.value);" onpropertychange="alert(this.value)" />

ただし、oninput を JS コードから分離した場合は、通常のイベント登録方法とは若干異なり、addEventListener を使用して登録する必要があります。

attachmentEventとaddEventListenerの違い

ここで、attachEvent と addEventListener の使い方を見てみましょう。

attachEvent メソッドは、イベントに他の処理イベントを添付します。 (Mozillaシリーズではサポートされていません)
Mozilla シリーズの addEventListener メソッド

例：

XML/HTML コードコンテンツをクリップボードにコピー

document.getElementByIdx_x_x("btn") .onclick = method1 ;
document.getElementByIdx_x_x("btn") .onclick = method2 ;
document.getElementByIdx_x_x("btn") .onclick = method3 ;

このように記述するとmedhot3のみが実行されます

次のように書きます:

XML/HTML コードコンテンツをクリップボードにコピー

var btn1Obj =ドキュメント.getElementByIdx_x_x("btn1");
btn1Obj.attachEvent("onclick",メソッド1);
btn1Obj.attachEvent("onclick",メソッド2);
btn1Obj.attachEvent("onclick",メソッド3);

実行順序はmethod3->method2->method1です

Mozillaシリーズの場合、このメソッドはサポートされていないため、addEventListenerが必要です。

XML/HTML コードコンテンツをクリップボードにコピー

var btn1Obj =ドキュメント.getElementByIdx_x_x("btn1");
btn1Obj.addEventListener("クリック",method1,false);
btn1Obj.addEventListener("クリック",method2,false);
btn1Obj.addEventListener("クリック",method3,false);
実行順序はmethod1- > method2- > method3です

addEventListener を使用して oninput イベントを登録する方法がわかったので、解決する必要がある問題 [ブラウザの分割] に戻りましょう。

IEブラウザを決定する

IEを区別するには？
これはよくある問題のようです。インターネット上でこの問題を見つける方法は数多くありますが、次の 2 つのカテゴリに分類できます。
1 つ目は、ブラウザの機能属性を決定することです。
2 番目は、従来のユーザーエージェント文字列を判別することです。これは、おそらく最も古く、最も人気のある検出方法です。
ここでは詳細には触れません。より簡単な方法で判断します。

XML/HTML コードコンテンツをクリップボードにコピー