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 分散ソフトウェアをインストールして使用する方法に関するチュートリアル

推薦する

APPログインインターフェースシミュレーション要求を実装するためのPostmanデータ暗号化と復号化

目次主に使用されるPostmanの機能データの暗号化と復号化さまざまなパラメータ設定実際に送信された...

MySQL 8.0.21 無料インストール版 設定方法 グラフィックチュートリアル

MySQLをインストールする6つの手順(インストールパッケージのみがインストール場所を選択できます)...

Nginx+SpringBoot による負荷分散の実装例

負荷分散の概要Nginx の負荷分散実装を紹介する前に、負荷分散の分類について簡単に説明します。負荷...

docker の実行に必要な権限の分析

Docker を実行するには root 権限が必要です。非 root ユーザーに docker コマ...

ブラウザ(IEシリーズ)を判別するための条件付きコメント

<!--[if IE 6]> IE6 のみが認識可能 <![endif]-->...

Docker が占有するディスク領域をクリーンアップする方法

Docker は多くのスペースを占有します。コンテナを実行したり、イメージを取得したり、アプリケー...

MySQL 8.0の落とし穴の詳細な説明

本日、MySQL 8.0 をアップデートしました。最初の問題: Navicatがデータベースに接続で...

DockerでMySQLマスタースレーブ環境を構築する方法の詳しい説明

序文この記事では、docker-compose と dockerfile を使用して、binlog ...

MySQLはOracleシーケンスに似たソリューションを実装しています

MySQLはOracleのようなシーケンスを実装しているOracle は通常、主キー フィールドを処...

MySQL 8.0 エラー サーバーがクライアントに不明な認証方法を要求しました 解決策

最新バージョンのMySQL 8.0.11をインストールした後、ユーザーを作成して認証します。認証され...

CSS でのナビゲーション バーとドロップダウン メニューの実装

1. CSSナビゲーションバー(1)ナビゲーションバーの機能ナビゲーション バーを使いこなすことは、...

MAC で Mysql5.7.10 のルートパスワードを変更する方法

まず、MySQLをskip-grant-tablesモードで起動します: mysqld --skip...

Docker 経由で Redis 6.x クラスターをデプロイする方法

システム環境: Redis バージョン: 6.0.8 Docker バージョン: 19.03.12シ...

CentOS VPS に SSH 経由で MySQL をインストールする方法

yum install mysql-serverと入力します。続行するにはYを押してくださいインスト...