<\/p>\n
You may already know these monitoring events available before and which are now no more supported :<\/p>\n
- \n
- DOMNodeInserted<\/li>\n
- DOMNodeRemoved<\/li>\n
- DOMSubtreeModified<\/li>\n
- DOMAttrModified<\/li>\n
- DOMCharacterDataModified<\/li>\n<\/ul>\n
They have been replaced by the MutationObserver in IE 11 because they have several drawbacks<\/strong>:<\/p>\n
- \n
- They are standard JS events, so they bubble the whole DOM : bad for performance.<\/li>\n
- They may spam you because each change raise an event without batching : bad for performance.<\/li>\n
- They are synchronous and block your execution : bad for performance.<\/li>\n
- Did I tell you that there may be performance issues?<\/li>\n<\/ul>\n
The MutationObserver fix these issues and is really easy to use<\/strong> :<\/p>\n
- \n
- Create a mutation observer by giving a callback function as a parameter.<\/li>\n
- Observe an element and specify “what to observe”<\/li>\n
- Do something in the callback<\/li>\n<\/ol>\n
Creating a mutation observer is easy as instantiating an object. The callback function takes 2 parameters : an object describing the change and the second one will be the MutationObserver.
\n[js]function mutationObserverCallBack(changes, mutationObserver) {\/*…*\/ }<\/p>\n\/\/Creation of the observer
\nvar observer = new MutationObserver(mutationObserverCallBack);[\/js]<\/p>\nThen you can observe any html element by calling the observe function on the observer. This function takes as a second parameter a json object with the “monitoring” options. For example, you can monitor only the addition\/removal of element on any of its children and any change of “class” :
\n[js]
\nvar observer = new MutationObserver(mutationObserverCallBack);
\nobserver.observe(element, {
\n attributes: true,
\n attributeFilter: ["class"],
\n childList: true,
\n subtree: true,
\n});
\n[\/js]
\nThere is a lot of possible configuration and you can find a full list on this MSDN page<\/a>.<\/p>\nIn the callback, you can explore the changes which is a list of the modifications. Each one has a type field and some properties (added nodes, old value, etc.) which let you know which change has been performed.
\n[js]function mutationObserverCallBack(changes, mutationObserver) {<\/p>\nchanges.forEach(function (mutationRecord) {<\/p>\n
console.log("Type of mutation: " + mutationRecord.type);<\/p>\n
if ("attributes" === mutationRecord.type) {
\n console.log("Old attribute value: " + mutationRecord.oldValue);
\n }
\n });
\n}[\/js]<\/p>\n![\"changesMoniker\"](\"http:\/\/www.jonathanantoine.com\/wp-content\/uploads\/2013\/10\/changesMoniker.png\")
<\/p>\nAdditionnal links<\/h4>\n
This is a just a quick blog post of this good new API. You can find more information on these pages :<\/p>\n
- \n
- MSDN : Mutation observers<\/a><\/li>\n
- MSDN : the observe method<\/a><\/li>\n
- MSDN : Migrating mutation and property change events to mutation observers<\/a><\/li>\n<\/ul>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Let me introduce you a new feature of Internet Explorer 11 which is available in your Windows 8.1 apps too : the MutationObserver. This object lets you observe the changes on any HTML element of…<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[28],"tags":[14,46,47,30,34,25,53],"_links":{"self":[{"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/posts\/1511"}],"collection":[{"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/comments?post=1511"}],"version-history":[{"count":8,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/posts\/1511\/revisions"}],"predecessor-version":[{"id":1520,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/posts\/1511\/revisions\/1520"}],"wp:attachment":[{"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/media?parent=1511"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/categories?post=1511"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/tags?post=1511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- MSDN : the observe method<\/a><\/li>\n
- MSDN : Mutation observers<\/a><\/li>\n