Observes a DOM Element property for changes with diff support. Uses xdiff for diff output.

$ component install jwerle/observer

var observer = require('dom-observer')
	,	ob1 = observer($('#my-el')[0], {prop: 'style'})

obj.on('change', function (diff, prev) {
	console.log(diff); 
	/**
		A diff for a property set would look like this =>
		[
			[
				"set", // action
				["root", "0" ], // property path .0
				"display" // value
			],
			[
				"set", // action
				["root", "length"], // property path .length
				1 // value
			],
			[
				"set", // action
				["root", "cssText"], // property path .cssTest
				"display: block;" // value
			],
			[
				"set", // action
				["root", "display"], // property path .display
				"block" // value
			]
		]
	**/
});

• el - A DOM Element
• opts - An object of options where .prop is the property is to observe for changes required
  • prop - The property to observe for changes
  • autoStart - Boolean whether to auto start by default. (default: true)
  • interval - A number in milliseconds for how often to check for changes (default: 50)

example

observer(document.getElementById('el'), {prop: 'dataset'}).on('change', function (diff) {
	// do something with diff
});

Starts observing at a given optional interval. This is started by default, pass autoStart: false to opts object in constructor. Emits the 'start' event when started.

Stops observing. Emits the 'stop' event when stopped.

Emitted when a change occurs on an observed property with the a diff array and a prev object which was the current state of the observed property before the change

Emitted when observing has started

Emitted when observing has been stopped

MIT