By Kees C. Bakker


2011-04-19 07:50:52 8 Comments

In the past we used browser sniffing to infer if certain events or capabilities were available. I understand that browser sniffing has been 'deprecated' or 'shunned' in favor of feature sniffing. I would like to know how I can check if a certain event can be handled.

Take DOMNodeInserted for example. It is supported by Chrome, FF and Safari, but not by IE. How can I sniff if this event is available? Is there a library present? How do you guys do proper feature sniffing?

3 comments

@Andrew 2011-04-19 09:25:01

To answer the generic - how do I do feature sniffing - I use the jQuery.support object.

@Kees C. Bakker 2011-04-19 10:38:01

I don't seem to find support for DOMNodeInserted.

@Andrew 2011-05-04 16:05:23

@Kees, that's the specific. I only had an answer for the generic.

@Mark Kahn 2011-04-19 07:59:59

You can't detect mutation events, and modernizr doesn't work for this (since people are going to spit that out as the defacto answer).

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

var div = document.createElement('div'), supported = false;
div.addEventListener('DOMNodeInserted', function(){ supported = true; });
div.appendChild(div.cloneNode(true));

Note that the above code will not work as-is if it's in linear code because the event listener is async. The general idea is valid, however, perhaps best implemented with a callback.

@Tim Down 2011-04-19 09:14:02

+1 for a good answer in general, but DOM mutation events aren't asynchronous in all browsers. As far as I'm aware the only situation they are async is in editable content in WebKit (although this may change). For example, try the following in Firefox 4: var div = document.createElement('div'), a = "sync"; div.addEventListener('DOMNodeInserted', function(){ console.log("Inserted " + a); }, false); div.appendChild(document.createElement("br")); a = "async"; Also, your code doesn't work in WebKit: it seems you need to add the div into the document for the event to fire.

@Kees C. Bakker 2011-04-19 10:36:54

@Tim so we are doomed to do browser sniffing?

@Kees C. Bakker 2011-04-19 10:40:12

@vwolved "(...)perhaps best implemented with a callback". How do I detect an event that never fires? Setting a Timeout or something?

@Tim Down 2011-04-19 10:45:04

@Kees: No, browser sniffing is not required. This basic technique still works: you just need to temporarily add the test div to the document. Since there is a chance that DOM mutation events will become asynchronous in more browsers in future, you should allow for that, possibly with a timer.

@Tim Down 2011-04-19 10:48:57

@Kees: Here's an example feature test of DOMAttrModified that unfortunately relies on the event firing synchronously: github.com/dperini/nwevents/blob/… I got it from this article: perfectionkills.com/…

@Mark Kahn 2011-04-19 17:03:41

@Tim -- thanks for the feedback. I've done this before but didn't have time to test the code last night. I remember this being async somewhere, but you're right. I just tested it and it doesn't seem to be in any browser.

@hnprashanth 2011-04-19 07:56:06

@Kees C. Bakker 2011-04-19 10:39:00

I'm missing support to sniff DOM events.

Related Questions

Sponsored Content

57 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

43 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

66 Answered Questions

[SOLVED] How do I check whether a checkbox is checked in jQuery?

96 Answered Questions

[SOLVED] How can I remove a specific item from an array?

  • 2011-04-23 22:17:18
  • Walker
  • 6967289 View
  • 8524 Score
  • 96 Answer
  • Tags:   javascript arrays

39 Answered Questions

[SOLVED] How do I return the response from an asynchronous call?

53 Answered Questions

86 Answered Questions

[SOLVED] How do JavaScript closures work?

58 Answered Questions

[SOLVED] How do I redirect to another webpage?

3 Answered Questions

41 Answered Questions

[SOLVED] Setting "checked" for a checkbox with jQuery

Sponsored Content