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

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

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

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 コードコンテンツをクリップボードにコピー
  1. document.getElementByIdx_x_x("btn") .onclick = method1 ;
  2.   
  3. document.getElementByIdx_x_x("btn") .onclick = method2 ;
  4.   
  5. document.getElementByIdx_x_x("btn") .onclick = method3 ;

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

次のように書きます:

XML/HTML コードコンテンツをクリップボードにコピー
  1. var btn1Obj =ドキュメント.getElementByIdx_x_x("btn1");
  2.   
  3. btn1Obj.attachEvent("onclick",メソッド1);
  4.   
  5. btn1Obj.attachEvent("onclick",メソッド2);
  6.   
  7. btn1Obj.attachEvent("onclick",メソッド3);

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

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. var btn1Obj =ドキュメント.getElementByIdx_x_x("btn1");
  2.   
  3. btn1Obj.addEventListener("クリック",method1,false);
  4.   
  5. btn1Obj.addEventListener("クリック",method2,false);
  6.   
  7. btn1Obj.addEventListener("クリック",method3,false);
  8.   
  9. 実行順序はmethod1- > method2- > method3です

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

IEブラウザを決定する

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. if("\v"=="v") {
  2.   
  3. 警告("IE");
  4.   
  5. }それ以外{
  6.   
  7. 警告("いいえ");
  8.   
  9. }
  10.   

これまで遭遇した問題は解決しました。アイデアが実装可能かどうかをテストするためにコードを書き始めましょう。

リスニング イベントを追加するための HTML 入力と値の変更に関する上記の簡単な分析は、エディターが皆さんと共有するすべての内容です。参考になれば幸いです。また、123WORDPRESS.COM をサポートしていただければ幸いです。

元の URL: http://www.web600.net/html/editor/JavaScript/201001131529.html

<<:  Typora コードブロックのカラーマッチングとタイトルシリアル番号実装コード

>>:  Linux で Ceph 分散ソフトウェアをインストールして使用する方法に関するチュートリアル

推薦する

JavaScript の構造化代入の一般的なシナリオと例 5 つ

目次序文1. データを抽出する2. エイリアス値3. 動的プロパティ4. オブジェクトの分解における...

vue-amap のインストールと使用手順

以前、Amap API を非同期にロードする方法を紹介しました。今回は、vue-amap の使用方法...

ラジオボタンと複数選択ボタンは画像を使用してスタイル設定されます

ラジオ ボタンや複数選択ボタンにスタイルを追加する方法や、ボタンを大きくする方法を尋ねる人を以前見か...

mysqlタイムスタンプの使用

序文:タイムスタンプ フィールドは、MySQL でよく使用されます。たとえば、データ行が作成または変...

Linux CDの意味と使い方

Linux CD とはどういう意味ですか? Linux では、cd はディレクトリの変更を意味します...

ベンダー プレフィックス: ブラウザ エンジン プレフィックスが必要なのはなぜですか?

ベンダープレフィックスとは何ですか?ベンダー プレフィックス - ブラウザー エンジン プレフィック...

Linux で Tomcat を実行するいくつかの方法の説明

Linux での Tomcat の起動とシャットダウンLinux システムでは、コマンド操作を使用し...

LinuxでDHCPサーバーを構築する方法

目次1. 基礎知識: 2. DHCPサーバーの設定: 1. サーバーのIPを確認する2. DHCP ...

データベース接続のURLの詳細な説明と概要

データベース接続のURLの詳細な説明と概要JDBC URL = プロトコル名 + サブプロトコル名 ...

QTとJavaScript間のインタラクティブデータの実装

1. QTからJSへのデータフロー1. QTはJS関数を呼び出し、JSはパラメータを通じてQTの値を...

Windows オペレーティング システムでの Linux 仮想マシンのインストールと構成のチュートリアル

序文仕事では、Linux 環境で操作する必要があることがよくあります。ここでは、win10 システム...

JavaScript でクールなマウス テーリング効果を実装

これを見た後、あなたにも手ができて、さまざまな美しい小さなしっぽを作れるようになることを保証します!...

CSS 表示属性のインラインブロックレイアウト実装の詳細な説明

CSS 表示プロパティ注: !DOCTYPE が指定されている場合、Internet Explore...

Vue パッケージアップロードサーバー更新 404 問題に対する 2 つの解決策

1: nginxサーバーソリューション、.conf構成ファイルを変更する解決策は2つある1: 位置 ...

win10 での mysql 8.0.16 winx64 インストールの最新グラフィック チュートリアル

このデータベースをダウンロードするには、多くの時間とトラフィックがかかります。踏み込んだ落とし穴で時...