Feature-detect: mutation-event availability in JavaScript?

Question

How can my JavaScript detect if an event is available?

I'm aware of some great event-compatibility tables, but I need to use feature detection, not browser-sniffing plus a lookup table.

Specifically, my JS makes great use of the DOM mutation events (DOMNodeInserted and DOMSubtreeModified) -- which work great in all browsers except (of course) Internet Explorer.

So, how would I detect if a browser supports DOMNodeInserted?

Answer 1

If you just want to check if the browser supports mutation events in general, you can use this simple test:

var hasMutationEvents = ("MutationEvent" in window);

Here are the results from a bunch of popular browsers: http://www.browserscope.org/browse?category=usertest_agt1YS1wcm9maWxlcnINCxIEVGVzdBjEkNAPDA

To run the browserscope test in another browser go here: http://jsbin.com/aqeton/4/

Answer 2

This question is quite old, but in case anyone else stumbles upon it, a solution for detecting mutation events is explained in this answer: How to check browser support for capabilities / events?

From that answer:

You can't detect mutation events, and modernizr doesn't work for this...

The only way to "detect" support for mutation events is to try and trigger the event.

For normal events, use the perfectionkills article in takteek's answer. This still doesn't seem to support sniffing of some new HTML5 events, like "input".

Answer 3

I looked around on google a bit. This looks like it's probably what you want:

http://perfectionkills.com/detecting-event-support-without-browser-sniffing/