問題タブ [mutation-events]

属性と、それが使用されているときのlabelイベントリスナーを設定したいと思います。toolbaritem拡張機能を追加しても、toolbaritem使用されていない限り、<toolbarpalette id="BrowserToolbarPalette">によって検出されdocument.getElementByIdないためです。現在DOMNodeInserted、ナビゲーションバーとアドオンバーにイベントリスナーがあり、toolbaritem属性を設定していますが、もっと良い方法があるかどうか疑問に思っています。

新しいノードを作成してHTMLページに挿入するJSスクリプトがあります。DOMミューテーションイベントを処理しており、DOMNodeInsertedイベントをキャプチャできます。その関数の内部で、ソース（つまり、HTMLのどの部分でスクリプト関数が呼び出されているか）とターゲット（つまり、ノードがHTMLページに追加されている部分）を見つけたいと思います。

を使用してターゲットを見つけることはできevent.targetますが、イベントのソースを見つけることができません。

たとえば、次の擬似コードHTMLページについて考えてみます。

ソースをBODYにしたい（スクリプトが開始されたため）、ターゲットはdiv（123）にする必要があります（属性がdiv_123に追加されたため）。

これどうやってするの？

ページ上の要素が変更されたときにサウンドを再生したい。これを行う方法は知っていますが、最初の変更でのみ再生することはできません。ユーザーがウィンドウ（タブ）にフォーカスして再度ぼかしを入れるまで、後で再生することはできません。

私の現在のコード：

コンテンツが Web ページに追加されたときにアクションをトリガーする必要があります。更新はさまざまな性質 (AJAX、遅延スクリプト、ユーザー アクションなど) である可能性があり、私の管理下にはありません。

DOM ミューテーション イベントを使用したかったのですが、すべてのブラウザーで使用できるわけではありません。フォールバック プランを提供するクロスブラウザ ライブラリはありますか?

また、Internet Explorer 9 がこれらの DOM ミューテーション イベントをサポートするかどうかも知りたいです。

ありがとう！

Facebook ページの上に「オーバーレイ」される JavaScript スクリプトを作成しようとしています。DOMContentLoaded を使用して、コンテンツがロードされたことを検出し、追加のものを追加します。ただし、Facebook は新しいページに移動するときにページを実際に「リロード」しないため (AJAX を使用するだけです)、DOMContentLoaded ハンドラーは実行されません。繰り返しますが、目を通しておかなければならない新しいものがあります。

とにかく、変更を検出するために、Facebook がページのハッシュを変更していたので onhashchange を使用することを考えましたが、Firefox 4 (これで Firefox 3 以降をサポートする必要がありますが、他のブラウザーはサポートしない) では、Facebook はハッシュを変更しません。 Firefox 3.6 より前のバージョンでは、onhashchange はありません。

DOMNodeInserted を使用することを考えましたが、ページの速度が本当に遅くなりますか? (このスクリプトでは速度が低下することはありません。)

テキストフィールドの値を検証する関数に変更イベントがバインドされているテキストフィールドがあり、対応する検証エラーメッセージをテキストフィールドの上の DOM にスプライスする可能性があります。多少無関係なラジオ ボタンのペアのいずれかをクリックして変更イベントがトリガーされた場合、クリックされたラジオ ボタンはフォーカスを取得しますが、私とユーザーの期待に反して、チェックされません。これが問題です。

最終的なシステムでの検証は AJAX を使用してサーバー側で実行されますが、次のコードは、AJAX が問題とは何の関係もないことを示しています。

ここで何が欠けているか教えてください：

Javascript を使用して XML 構造の変更をリッスンしようとしています。私は次のコードを持っています：

これは機能していません。ただし、次のコードは機能します。

ここで何が欠けていますか？

イベントが利用可能かどうかを JavaScript で検出するにはどうすればよいですか?

私はいくつかの優れたイベント互換性テーブルを認識していますが、ブラウザー スニッフィングとルックアップ テーブルではなく、機能検出を使用する必要があります。

DOMNodeInserted具体的には、私の JS は DOM ミューテーション イベント (および)を大いに活用していますDOMSubtreeModified。これは、(もちろん) Internet Explorer を除くすべてのブラウザーでうまく機能します。

では、ブラウザが をサポートしているかどうかをどのように検出しDOMNodeInsertedますか?

将来の操作を存在しない要素にバインドすることについて多くの質問があり、最終的にlive /delegateで回答されます。セレクターに一致するすべての既存の要素と、まだ作成されていない同じセレクターに一致するすべての将来の要素に対して、任意のコールバックを実行する方法(たとえば、クラスを追加したり、プラグインをトリガーしたりする方法)を考えています。

livequery プラグインの主な機能はコアに組み込まれたようですが、任意のコールバックをアタッチする他の部分は途中で失われました。

もう 1 つの一般的な答えはイベント委任ですが、要素を作成してイベントをトリガーするすべてのベンダー コードにアクセスできない場合はどうなるでしょうか。

以下は実際のコードです。

1 つのアプローチは、新しいノードがいつ追加/削除されたかを監視し、セレクターを再トリガーすることです。@arnorhsのおかげで、私はDOMNodeInsertedイベントについて知っています。これらの小さな IE パッチがいつか jQuery のアップストリームに到達するか、jQuery DOM 関数がラップされる可能性があることを知っていることを期待して、クロスブラウザーの問題を無視します。

ただし、DOMNodeInserted がクロスブラウザーを起動したことを確認できたとしても、複数のセレクターでそれにバインドするのはばかげています。いつでも何百もの要素を作成することができ、これらの要素のそれぞれに対して潜在的に数十のセレクター呼び出しを行うとクロールします。

これまでの私の最高のアイデア

DOMNodeInserted/Deleted を監視するか、jQuery の DOM 操作ルーチンにフックして、「再初期化」が発生するフラグのみを設定する方がよいでしょうか? 次に、そのフラグをx秒ごとにチェックするタイマーがあり、DOMが実際に変更されたときにのみ、これらすべてのセレクター/コールバックを実行します。

大量の要素を高速で追加/削除している場合 (アニメーションや ____ のように)、これはまだ非常に悪い可能性があります。保存されたセレクターごとに x 秒ごとに 1 回 DOM を再解析する必要があるのは、x が低い場合は負荷が高すぎる可能性があり、x が高い場合はインターフェースが遅く見える可能性があります。

他の新しいソリューションはありますか?

気が向いたら賞金を追加します。最も斬新な解決策に報奨金を追加しました!

基本的に私が得ているのは、DOM を操作するためのよりアスペクト指向のアプローチです。新しい要素が将来作成されることを可能にするもので、最初の document.ready 変更も適用して作成する必要があります。

JS は最近非常に多くの魔法を行うことができたので、それが明らかになることを願っています。