mutation-events

I'm trying to figure out if there is any way to listen to events like focus or change of an HTML element with contenteditable attribute. I have this html markup: <p id="test" contenteditable >Hello World</p> I've tried these without any success( JSBin ): var test = document.querySelector('#test'); test.addEventListener('change', function(){ alert('content edited'); }, false); test.addEventListener('DOMCharacterDataModified', function(){ alert('content edited'); }, false); test.addEventListener('focus', function(){ alert('content edited'); }, false); I don't want to listen to keyboard or mouse

DOMNodeInserted is known to make dynamic pages slow, MDN even recommends not using it altogether, but doesn't provide any alternatives. I'm not interested in the element inserted, I just need to know when some script modifies the DOM. Is there a better alternative to mutation event listeners (maybe getElementsByTagName inside an nsiTimer)? If you are creating a web app that targets recent mobile phones and newer versions of browsers (Firefox 5+, Chrome 4+, Safari 4+, iOS Safari 3+, Android 2.1+), you can use the following code to create an awesome event for the insertion of dom nodes, and it

I do A/B Testing on our site and I do most of my work is in a JS file that is loaded at the top of the page before anything else is rendered but after jQuery has loaded which comes in handy at times. Taking a very simple example of changing an H1 tag, I would normally inject a style in the head to set the H1 opacity to 0 and then on DOMContentLoaded, I would manipulate the H1 contents and then set the opacity to 1. The reason for this is to avoid a flash of the old content before the change takes place - hiding the whole object is more graceful on the eye. I've started to look at the

Are there any DOM mutation events in JQuery or in vanilla Javascript that fire cross browser? To clarify, say I have a script on my page which inserts a div into the body. I don't have access to the script and I don't know when the div has been inserted. I was wondering if there's a DOM mutation event that I can add a listener for, to know when an element has been inserted. I know I can use a timer to periodically check for the insertion but, I don't really like the overhead that this would impose. Daniel Mendel This is certainly a hack, but why not patch the underlying DOM methods used to

Since DOM mutation is marked as deprecated by the w3c (see http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents ), is there an (fast) alternative way to detect attribute modification in the DOM ? As far as I know there is no alternative (yet) so you are stuck with DOMAttrModified which is only supported in Firefox and Opera. In IE you have the onpropertychanged event but there is no way to get similar functionality in Chrome/Safari. There are a number of things you could do depending on what you are trying to accomplish and the browsers you are targetting: define getters and setters

I need to leverage this DOM event. IE has onpropertychange, which does what I need it to do also. Webkit doesn't seem to support this event, however. Is there an alternative I could use? Although Chrome does not dispatch DOMAttrModified events, the more lightweighted mutation observers are supported since 2011 and these work for attribute changes, too. Here is an example for the document body: var element = document.body, bubbles = false; var observer = new WebKitMutationObserver(function (mutations) { mutations.forEach(attrModified); }); observer.observe(element, { attributes: true, subtree:

Other than using a timer to count the number of elements over time and looking for changes, I can't think of a better way to simulate this event. Is there some sort of proprietary IE version of DOMNodeInserted? Thanks. No, there isn't. The nearest is the propertychange event, which fires in response to a change in an attribute or CSS property of an element. It fires in response to changing the innerHTML property of an element directly but not when the contents of the elements are altered by some other means (e.g. by using DOM methods such as appendChild() or by altering the innerHTML of a