問題タブ [event-delegation]

私は4つのパラメータを取るイベント委任プラグインを書いています:

• context = 文字列セレクター
• 子要素 = 文字列セレクター
• イベント = 文字列
• fn = 呼び出す関数

親がDOMに存在する場合、プラグインはイベントを子要素に委任する必要があります...

コンテキスト要素が子要素と同じ場合に問題が発生します。デリゲートは、渡された子がコンテキストの子であると想定しているため、機能しなくなりました。

失敗する入力の例を次に示します。

• コンテキスト = "ul"
• 子要素 = "ul.active"
• イベント=「クリック」

$('ul').on('click', 'ul.active', fn())「ul.active」が「ul」と同じになる場合があるため、できません。

私が考えることができる1つの解決策は次のとおりです。

委任イベントをバインドする前に「子==コンテキスト」のチェックを行い、適切に状況にバインドする方が良いのではないでしょうか?

私は巨大なテーブル (数千行など) を持っています。行をクリックすると、行の色を変更するなどの簡単なことを行います。問題は、行をクリックすると、色を変更するのに非常に長い時間 (1 秒) かかることです。これはChromeとSafariで見られます。しかし、Firefox や Opera で試してみると、非常に高速です。

イベント委任 (イベントリスナーを各行にバインドする代わりに、親 div がすべてのイベントを処理する) で修正できると思いましたが、いいえ、同じままです。

何か助けはありますか？

更新：（ 要約、フィドル、報奨金）

この質問はあまり注目されていないので、私はそれに少し担当者を費やすつもりです. 私は、回答と質問の両方で過度に冗長になる傾向があることを知っています。それが、私が先に進んでこの fiddleを設定した理由です。これは、私の見解では、バブリングchangeイベントに近づくために現在使用しなければならない種類のコードの適切な表現です。私が解決しようとしているいくつかの問題：

1. フォーカスを失っていない限り、pseudo-changeイベントは select 要素では発生しません。場合によっては、新しい値を選択したときにクライアントをリダイレクトする必要があります。どうすればこれを達成できますか?
2. ハンドラは、ラベルがクリックされたときと、チェックボックス自体がクリックされたときの両方で呼び出されます。それ自体はあなたが期待することですが、イベントのバブリングにより、どの要素がクリックされたかを判断することは (AFAIK) 不可能です。realTargetIE のイベント オブジェクトにはプロパティがありません。
3. ラベルをクリックしてIEのチェックボックスの状態を変更するcheckedと、すべて問題ありませんが（厄介な回避策が必要ですが）、チェックボックスを直接クリックするとハンドラーが呼び出されますが、チェックされた状態は変更されません。 2回目。その後、値は変更されますが、ハンドラーは呼び出されません。
4. 別のタブに切り替えて再び戻ると、ハンドラーが複数回呼び出されます。チェックされた状態が実際に変化した場合は 3 回、チェック ボックスを 1 回だけ直接クリックした場合は 2 回。

上記の問題の 1 つまたは複数を解決するのに役立つ情報をいただければ幸いです。jQueryタグを追加することを忘れていませんでした。純粋な JS が好きなので、純粋な JS の回答を探しています。

250 をはるかに超える選択要素と 20 ～ 30 のチェックボックスを含む Web ページがあります。また、ユーザーの行動を追跡し、適切な行動を取らなければなりません。したがって、何百ものリスナーを追加するのではなく、変更イベントを委任することは非常に自然なことです。

もちろん、IE - 会社のポリシー: IE8 をサポートする必要がある - は、必要なときに onchange イベントを発生させません。だから私は onchange イベントを偽造しようとしています。これまでのところ、私を本当に悩ませている1つのことを除けば、かなりうまく機能しています。イベントを登録するためにandを
使用しています。場合によっては、ユーザーが select 要素から新しい値を選択すると、スクリプトはすぐに応答する必要があります。ただし、select がフォーカスを失っていない限り、これは発生しません。onfocusinonfocusout

これが私がこれまでに思いついたものです：

onfocusinイベントにバインドされたハンドラー内に別のイベントリスナーをアタッチしようとしましonclickた。onfocusoutATM にフォーカスがある selectのイベントを発生させました。唯一の問題は、ユーザーの 99.9% が選択をクリックするため、focusinイベントも onclick を発生させることです。

それを回避するために、クロージャーを作成し、現在のフォーカス中の選択とその元の値を引数として渡しました。ただし、一部のユーザーはキーボードを使用し、これらのユーザーは多くの場合、値を変更せずに次の選択ボックスに移動します。新しいonclickリスナーをバインドするたびに...すべてをチェックe.typeして個別に処理するよりも簡単な方法があると思います。
例として: 追加のonclickリスナーを含むコード: すべてのコードは最初のスニペットと同じなので、case 'select':ブロックのみを貼り付けています

私は iPad Web アプリケーション (ネイティブ アプリケーションではない) に取り組んでおり、Sproutcore フレームワークを使用しています。.template ファイルで定義されたボタンがあり、次のように定義されています。

{{view Octopus.ButtonView content="action_ChangePassword" targetBinding=".parentView.parentView.changePasswordTarget" actionBinding=".parentView.parentView.changePasswordAction" }}

changePasswordAction はビュー ページで定義されていますが、バインドされている関数は iPad でトリガーされません。ただし、コードを変更しなくても、デスクトップ Web アプリケーションで同じ関数がトリガーされます。デスクトップ Web アプリケーションと比較して、iPad の .template ファイルからのイベント委任に別の方法があるかどうかを教えてください。

jQuery のイベント委任を使用して、テーブルの行にクリック イベントを追加しています。行の最初の td にもチェックボックスがあります。行のどこかをクリックすると、すべてが期待どおりに機能します。ただし、チェックボックスをクリックしたときにイベントが機能したくありません。:not() セレクターを使用してみましたが、チェックボックスをクリックしたときにまだイベントをトリガーしているため、何かが足りない可能性があります。

HTML

jQuery

私がやろうとしていることを修正するための助けを得ることができますか?

編集 #2: 問題はもう存在しません。それはある種のスコーピングの問題でした。しかし、今では機能しています。ご迷惑をおかけして本当に申し訳ありません。

私のスクリプトの一部には、イベントの委譲と ID によるターゲットの指定があります。しかし、私がそれを実行すると。回線if(evt.target.id == ("subtaskSubmit" + subtaskCounter))がまったく機能していないようです。これが私のコードです:

編集: コードをデバッグするためにいくつかの変更を加えましたが、結果は奇妙です:

では、なぜevt.target.id == ("subtaskSubmit" + subtaskCounter)戻りますfalseか?

JavaScriptでモジュールパターンを使用しています。イベントを処理するcontroller.jsというファイルがあります。問題は、サブモジュールを使用したいということです。しかし、イベントはcontroller.jsで処理されるため、サブモジュールでイベントが発生した場合、どのように処理しますか？view.jsなどの別のファイルから
呼び出されたカスタムイベントをディスパッチします。PAGE_DISPLAYEDこのイベントはcontroller.jsによってリッスンされ、表示されたページに応じて、その特定のページに固有の追加のイベントハンドラーをバインドするなど、他のことを行います。サブモジュールを使用してこれを行う方法。

サンプルコード：

上記のコードとイベント委任を拡張するにはどうすればよいですか？または、コードアーキテクチャが制限を課していますか。

私はjQueryMobileを使用しており、イベントのディスパッチはPAGE_DISPLAYEDイベントをリッスンすることによって行われpagechangeます。

ありがとう。

JavaScript では、次のようなイベント委任を使用していました。

jQueryでこれに相当するものは何ですか? 私は知って.on()いますが、イベント委任でそれを使用する方法は? つまり、これはどのように行われるのですか：

しかし、バニラの JavaScript とまったく同じではないでしょうか? それを達成するためのより良い方法があるかどうか知りたいです。そして、これが唯一の方法である場合、JS よりも jQuery の方が優れている点は何ですか?

AJAX 経由で読み込まれたプレースホルダー テキストを含むテキストエリアがいくつかあります。フォーカス時にテキストを非表示にしたいので、フォーカス イベントをクラスに委任しました。テキストエリアをクリックするとフォーカスイベントが発生し、他の入力要素へのクリック/タブ移動でも発生します。しかし、テキストエリアにタブで移動しても機能しません。この動作は、すべてのブラウザーで一貫しています。これが私がやっていることです。

hasInstructionsプレースホルダーテキストを持つ入力要素のクラスです。

以下のようにイベントをテキストエリアに直接バインドすると、問題なく動作します。

だから私の質問は、テキストエリアのフォーカスイベントがバブルアップしていませんか? もしそうなら、これを達成するための最良の方法は何ですか?

編集：質問した後に質問を変更する方法はあまり好きではないことはわかっています。MikeD の回答は元の質問に対して完全に有効であり、より良い質問が得られない場合は受け入れます。これが問題です

私はjQuery 1.4.2を使用していますが、ライブラリをページに出荷していないため、より高いバージョンを使用できません。ブラウザーの互換性の理由から、HTML5 プレースホルダーを使用することはできません。