8

複数のテキスト入力フィールドを含む大きなフォームがあります。基本的に、すべてのフィールドのイベントといくつかonchangeのフィールドのイベントを処理する必要があります。フィールドに変更が加えられ、フィールドがフォーカスを失うと、両方のイベントが発生します (これは正しい動作です)。 唯一の問題は、イベントを処理する前にイベントを処理したいということです。 onbluronbluronchange

ie と Firefox でいくつかのテストを行った結果、デフォルトの動作は のonchange前にイベントを発生させるようですonblur。次のコードをテストとして使用しています...

<html>

<body >
    <input type="text" value="here is a text field" onchange="console.log('Change Event!')" onblur="console.log('Blur Event!')" >

</body>
</html>

それは私の質問に私をもたらします:

  1. この動作はブラウザ間で一貫しているようです。なぜonchange最初に発火するのですか？

  2. すべての入力要素のイベントを処理できないため、イベントを処理する前に発生さonblurせる方法はありますか?onbluronchange

4

2 に答える 2

10

  1. 最初に起動する理由onchangeは、要素がフォーカスを失う (つまり「ぼかし」) と、通常は変更が完了するためです (通常、スクリプトはユーザーの操作なしで要素を変更できるためです)。

  2. 最初に処理する必要がある要素については、ハンドラーをonblur無効にして、ハンドラーから(またはカスタム イベント) を起動できます。これにより、より多くの作業が必要になりますが、正しい順序が保証されます。変化を検出するには、そのフィールドの状態変数を使用できます。onchangeonchangeonblur

ただし、一般的な意見として、このようなシンクロニシティの必要性は、解決しようとしている問題を解決するために使用しているアプローチが、場合によっては避けられない場合でも、より多くの作業が必要になる可能性があることを示しています。これが唯一の方法であると確信している場合は、これらの方法のいずれかを試してください。

編集: 最後の点について詳しく説明すると、イベント モデルに関するいくつかの仮定に従う必要があります。change各イベントの後に a が続き、それ以外の場合は未処理になると想定していますか?それとも、blurそれぞれを処理したいのですchangeが、その後に get が続くものは、それらをblur処理した後にさらに処理onblurしますか? いずれにせよ、順序を強制したい場合、ハンドラーは共通のリソース (グローバル変数、プロパティなど) にアクセスする必要があります。他に使用したいイベントの種類はありますか? ( input?)。最後に、 https ://developer.mozilla.org/en-US/docs/Web/Reference/Events/changeのリンクに、changeMozilla ブラウザーのイベントの 詳細が記載されています。3 番目の「箇条書き」は、イベントの順序の問題に対処します。

于 2013-08-13T17:24:15.833 に答える
4

これはちょっとしたハックですが、ほとんどのブラウザでうまくいくようです:

<input type="text" value="Text Input" onchange="setTimeout(function(){console.log('Change Event!')}, 0);" onblur="console.log('Blur Event!');" />

ここで実際のフィドルを見ることができます: http://jsfiddle.net/XpPhE/

setTimeout(function, 0)このトリックに関する背景情報を少し紹介します: http://javascript.info/tutorial/events-and-timing-depth

それが役立つことを願っています:)

于 2013-08-13T17:27:22.837 に答える