2010-12-13 8 views
4

コンテンツをWebページに追加するときに、アクションをトリガーする必要があります。アップデートは異なる性質(AJAX、遅延スクリプト、ユーザーアクションなど)であり、私の管理下にはありません。DOM変異イベントのライブラリですか?

私はDOM変異イベントを使用したかったのですが、すべてのブラウザで使用できるわけではありません。このためのクロスブラウザライブラリはありますか?それは代替計画ですか?

また、私はInternet Explorer 9がこれらのDOM突然変異イベントをサポートするかどうかを知りたいと考えています。

ありがとうございます!

答えて

0

アクションを簡単にトリガーするには、関数を設定し、JSONPを使用してAJAXリクエストを呼び出してその関数を呼び出すことができます。ユーザーアクション中に同じ関数を呼び出すことができます。これを行うには2つの方法があり

+0

はい、すべての使用例をカバーするわけではありません。 – Christophe

+0

これを行うためのライブラリを探している場合(私はあなたのユースケースがどのようなものかわからないので)、jQueryを考えましたか? – honyovk

1

...

一つは、あなたがDOM(var snap = document.body)のスナップショットを取ることができ、後からのDOMの100msにそれを比較し、再び体内にsnapをリセットします。私はあなたにそれらを比較する方法を創造的にさせるでしょう:反復は一般的な答えのようです。それはかなりではありません。

他のオプションは、アプリケーションで要素を追加/削除する関数を作成する際に特別な機能を持たせることです。この関数は、追加または破棄する要素だけを反復して、一致を探します。

/* Shim matchesSelector */ 
if (!Element.prototype.matchesSelector) { 
    Element.prototype.matchesSelector = 
    Element.prototype.matches || 
    Element.prototype.webkitMatchesSelector || 
    Element.prototype.mozMatchesSelector || 
    Element.prototype.msMatchesSelector || 
    Element.prototype.oMatchesSelector; 
} 

function addingToDom(elm){ 

    /* Whichever method you want to use to map selectors to functions */ 
    var callbacks = array(['.class', fn-reference1], ['#id', fn-reference2], ['div', fn-reference3]); 

    /* go through all the elements you're adding */ 
    for (var i = 0; i<elm.length; ++i){ 
     /* go through all the selectors you're matching against */ 
     for (var k = 0; k<callbacks.length ++k){ 
      if(elm[i].matchesSelector(callbacks[k][0])){ 
       /* call function with element passed as parameter */ 
       callbacks[k][1](elm[i]); 
      } 
     } 
    } 
} 

これは完璧ではないかもしれませんが、どこに向かうべきかを理解しておく必要があります。引数として追加したばかりの要素を渡して、この関数(addingToDom)を呼び出します。要素を削除する(または同じ関数ですが、コールバックの別の配列を条件付けする)同様の関数を作成します。

これは私がいくつかのアイデアをテストするために使用している現在の(大きくて乱雑な)コードの外挿です。私はマッチセレクタをこのシムと同じくらい前までテストしました。それは素晴らしいことです!

私は、要素が追加されたときに呼び出され、パラメータとして渡される関数として設定できる何らかの種類のパラメータを持つ可能性を考慮しましたが、考慮しませんでした。しかし、それはおそらく遠くに取り込まれます。

+0

共有ありがとう!残念ながら、私の場合、要素は私のコントロール下にない関数によって追加または削除することができます。自分のコードに関係なくDOMを監視する必要があります。 – Christophe

0

これは、要素が追加されたかどうかを知るためのアイデアです:ページ上の各要素にクラスを追加してから、そのクラスを持たない各要素を見つけるためにクエリを使用してください。querySelectorAll(':not(.myclass)')

falsenull?私の頭の上をオフに知らない)あなたはまだ間隔で実行する必要があると思いますが、それはネイティブブラウザだとquerySelectorAllが迅速であり、それは「空の」を返す場合は、ドン何もしないで、それは最小限のオーバーヘッドでなければなりません。

関連する問題