如何检查浏览器对功能/事件的支持？

Question

过去我们使用浏览器嗅探来推断特定事件或功能是否可用。我了解到浏览器嗅探已被“弃用”或“避免”，而特性嗅探更加受欢迎。我想知道如何检查某个事件是否可处理。

以DOMNodeInserted为例。它在Chrome、FF和Safari中得到支持，但不支持IE。我该如何嗅探这个事件是否可用？是否有相应的库存在？你们如何进行正确的特性嗅探？

- Kees C. Bakker

Answer 1

您无法检测到突变事件，而且现代化的技术也无法解决这个问题（因为人们会把它作为事实标准答案）。

唯一的“检测”突变事件支持的方法是尝试触发该事件。伪代码：

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

注意，如果异步事件监听器在线性代码中使用，则上述代码将无法正常工作。然而，总的思路是正确的，最好通过回调来实现。

- user578895

---

一般来说，如果回答得好会加1分，但是DOM突变事件并不在所有浏览器中都是异步的。据我所知，它们只有在WebKit中的可编辑内容中是异步的（尽管这可能会改变）。例如，在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"; 另外，你的代码在WebKit中无法工作：似乎需要将div添加到文档中才能触发事件。 - Tim Down

@Tim，那我们注定要进行浏览器嗅探吗？ - Kees C. Bakker

@vwolved "（...）也许最好使用回调函数来实现"。如何检测从未触发的事件？设置一个Timeout或其他什么东西吗？ - Kees C. Bakker

@Kees：不需要浏览器嗅探。这种基本技术仍然有效：您只需要将测试div临时添加到文档中。由于未来更多的浏览器可能会使DOM突变事件异步化，因此您应该考虑使用计时器来解决这个问题。 - Tim Down

@Kees：这是一个DOMAttrModified功能测试的例子，不幸的是它依赖于同步触发事件：https://github.com/dperini/nwevents/blob/ac33e52c1ed1c1c3a1bb1612384ca5b2f7a9b3ef/src/nwmatcher.js#L92 我从这篇文章中获取了它：http://perfectionkills.com/detecting-event-support-without-browser-sniffing/ - Tim Down

@Tim -- 感谢您的反馈。我以前做过这个，但昨晚没有时间测试代码。我记得这个在某个地方是异步的，但你是对的。我刚刚测试了一下，在任何浏览器中似乎都不是异步的。 - user578895

Answer 2

请查看http://www.modernizr.com网站。

- hnprashanth

---

我缺少嗅探DOM事件的支持。 - Kees C. Bakker

Answer 3

回答通用问题——如何进行特性嗅探——我使用jQuery.support对象。

- Andrew

---

我似乎找不到DOMNodeInserted的支持。 - Kees C. Bakker

@Kees，那就是具体问题了。我只有对于一般性问题的答案。 - Andrew