The tool watches HTML document basing on given CSS selector.
This may be used for running some code not only on elements which exist at the moment, but for newly added ones as well.
The library uses just pure Javascript without any dependencies and is compatible with all modern browsers including Internet Explorer 11.
- Make all links on the page turn red, including ones added in the future:
new Freedom.SelectorWatcher().attach( {
selector: 'a',
callback: function ( element ) {
element.style.color = 'red';
}
} );(Freedom is a web framework featuring this library, hence the namespace's name.)
- Also add a
clickevent handler for links:
new Freedom.SelectorWatcher().attach( {
selector: 'a',
callback: function() {/*...*/},
handlersByType: {
click: function ( event ) {
alert( this.href );
event.preventDefault();
event.stopPropagation();
}
}
} );- Turn watcher off:
var watcher = new Freedom.SelectorWatcher().attach( {/*...*/} );
watcher.detach();Event handlers are attached to the <body> with only single instance created for each one
(similar to jQuery.on()). They have to be listed explicitly by event type to make it possible to remove them.