2015-12-20 5 views
1

С MutationObserver я слушаю вставку узла в дерево, но он запускается после того, как узел вставлен.JavaScript - Прослушивание изменений до узла

Если я хочу запустить событие до того, как узел будет вставлен в узел, что бы я сделал?

ex.

// create an observer instance 
var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
    console.log(mutation.type); 
    });  
}); 

// configuration of the observer: 
var config = { subtree: true }; 

// pass in the target node, as well as the observer options 
observer.observe(document.documentElement, config); 

Событие как DOMNodeInserted, но если я хочу что-то вроде «BeforeDOMNodeInserted»?

Как прослушиватель Firefox beforescriptexecte.

ответ

1

Если я хочу запустить событие до того, как узел будет вставлен в узел, что бы я сделал?

Стандартный DOM API не предоставляет вам возможность установить крючок на «перед вставкой/мутацией содержимого».

И это должен быть крючок (функция), но не событие. Когда вы получите это событие (это асинхронно), будет слишком поздно - уже произошла мутация.

В качестве опции для вас: определить набор DOM-мутирующих функций для остальной части вашего кода. В этой функции вы можете выполнить «предварительную фильтрацию» содержимого, прежде чем он войдет в DOM.

Update, вот пример Node.appendNode «угон»: «получил AppendChild называют»

<html> 
    <head> 

    <script type="text/javascript"> 
     !function(){ 
     var pAppendChild = Node.prototype.appendChild; 
     Node.prototype.appendChild = function(child) { 
      console.log("got appendChild call!"); 
      pAppendChild.call(this,child); 
     } 
     }(); 
    </script> 
    </head> 
<body> 
</body> 
    <script type="text/javascript"> 
     var p = document.createElement("p"); 
     document.body.appendChild(p); 
    </script> 
</html> 

Если вы будете запускать код, который вы увидите в консоли.

Концептуально вы можете сделать что-то подобное и переопределить стандартные методы мутации DOM. Насколько практично это будет другая история.

+0

Можете ли вы предоставить мне пример «фильтрационного» кода? Спасибо :). –

+0

@VasileAlexandruPeste Я обновил свой ответ с помощью образца. –

+0

Hei, он работает, но я хочу также фильтровать «парсер», когда он создает дерево HTML, например MutationObserver, если я слушаю объект документа с ним, он также запускает, когда тег «head, body и child» добавляется парсером когда он строит документ, когда страница загружается, можем ли мы это сделать? –

Смежные вопросы