Y at-il un événement javascript lorsque des éléments sont ajoutés ou supprimés du DOM?

Question

J'essaie de créer une extension de navigateur Chrome, qui devrait améliorer la façon dont le site Web de Twitter se comporte dans Google Chrome. Je veux marquer le tweet le plus élevé qui est déplacé vers le bas lorsque de nouveaux tweets sont chargés, et faire défiler vers lui.

Je suis capable de récupérer le tweet supérieur avant le clic en accroissant l'événement mousedown en utilisant .live(). Après cela, je dois attendre que les tweets soient chargés, avant de faire défiler le tweet précédent. J'ai un hack en place avec un setTimeout() maintenant, et cela fonctionne pour moi, mais je voudrais une meilleure solution.

solutions possibles:

• D'une certaine façon crochet un événement qui se déclenche lorsque des éléments sont chargés à un div
• Crochet un événement qui se déclenche quand un élément est alors retiré du DOM

Answer 1

Puisque vous visent Google Chrome, vous pouvez utiliser le DOM Level 2 Mutation Events, plus précisément:

• DOMNodeInserted
• DOMNodeRemoved

Vous pouvez les lier en utilisant addEventListener:

someElement.addEventListener('DOMNodeInserted', eventHandlerFunction, false); 

Ou puisque vous utilisez jQuery de, avec la méthode bind:

$(selector).bind('DOMNodeInserted', function() { 
    //.. 
});​ 

Prenez soin de ne pas modifier le DOM affecté dans ces événements, car vous pourriez entrer dans une récursion d'événement infini Par exemple, si vous insérez un élément dans l'événement DOMNodeInserted, il se déclenchera à nouveau.