HTML 入力相当値の変更とリスニング イベントの追加の簡単な分析

達成される効果

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

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

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

この情報を読んだ後、oninput イベントを使用すると、他のブラウザ でも同じ効果を実現できることが分かりました。これは、IE ブラウザを区別するだけで十分です。

oninputの使い方

まずはoninputの使い方を理解しましょう。
登録時刻をページに直接記述する場合は、以下の記述方法が実現できます:
295ae8f966204ae00e9f47f7ba9a5420

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

attachEventとaddEventListenerの違い

そうは言っても、attachEventとaddEventListenerの使い方を見てみましょう:

attachEventメソッドは、他の処理イベントを特定のイベントに添付します。 (Mozilla系は未サポート) Mozilla系では
addEventListenerメソッドを使用します

例:

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

このように書くとmedhot3のみが実行されます

このように記述します:

var btn1Obj = document.getElementByIdx_x_x("btn1");   
  
btn1Obj.attachEvent("onclick",method1);   
  
btn1Obj.attachEvent("onclick",method2);   
  
btn1Obj.attachEvent("onclick",method3);

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

Mozilla系の場合、このメソッドはサポートされていませんので、addEventListenerの使い方を理解した上でaddEventListener

var btn1Obj = document.getElementByIdx_x_x("btn1");   
  
btn1Obj.addEventListener("click",method1,false);   
  
btn1Obj.addEventListener("click",method2,false);   
  
btn1Obj.addEventListener("click",method3,false);   
  
执行顺序为method1->method2->method3

を使用する必要があります。 oninputイベントを登録したら、本題の「ブラウザ分割問題解決」に戻ります。

IEブラウザを判断するIEの見分け方は？

これはよくある質問のようですが、インターネット上でそれを見つける方法はたくさんあります。それらは 2 つのカテゴリに分類されます。

1 つはブラウザの機能属性を判断することです。
2 つ目は、従来のユーザー エージェント文字列を判断することです。これはおそらく最も古く、最も一般的な検出方法です。
ここでは詳細は説明しません。

if("\v"=="v") {   
  
  alert("IE");   
  
}else{   
  
  alert("NO");   
  
}

これまでのところ、私たちのアイデアが機能するかどうかをテストするためのコードを書き始めましょう。 。

上記の HTML 入力等値変更の簡単な分析と監視イベントの追加は、編集者が共有したすべての内容であり、参考になれば幸いです。また、PHP 中国語 Web サイトをサポートしていただければ幸いです。

HTML 入力に相当する変更の簡単な分析とリスニング イベントの追加に関するその他の記事については、PHP 中国語 Web サイトに注目してください。