Как проверить поддержку браузером возможностей/событий?

В прошлом мы использовали сниффинг браузера, чтобы определить, доступны ли определенные события или возможности. Я понимаю, что сниффинг браузера был «устарел» или «избегал» в пользу сниффинга функций. Я хотел бы знать, как я могу проверить, можно ли обработать определенное событие.

Возьмем, к примеру, DOMNodeInserted. Он поддерживается Chrome, FF и Safari, но не IE. Как я могу обнюхать, доступно ли это событие? Присутствует ли библиотека? Как вы, ребята, делаете правильный сниффинг функций?


javascript jquery mutation-events
person Kees C. Bakker    schedule 19.04.2011    source источник

Ответы (3)


arrow_upward
6
arrow_downward

Вы не можете обнаружить события мутации, и modernizr не работает для этого (поскольку люди собираются выплюнуть это как ответ де-факто).

Единственный способ «обнаружить» поддержку событий мутации — попытаться инициировать событие. Псевдокод:

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

Обратите внимание, что приведенный выше код не будет работать как есть, если он представлен в виде линейного кода, поскольку прослушиватель событий является асинхронным. Однако общая идея верна, возможно, лучше всего ее реализовать с помощью обратного вызова.

person Mark Kahn    schedule 19.04.2011
comment
+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 в документ, чтобы событие сработало. - person Tim Down; 19.04.2011
comment
@ Тим, значит, мы обречены на обнюхивание браузера? - person Kees C. Bakker; 19.04.2011
comment
@vwolved (...) возможно, лучше всего реализовать с обратным вызовом. Как обнаружить событие, которое никогда не срабатывает? Установка Timeout или что-то в этом роде? - person Kees C. Bakker; 19.04.2011
comment
@Kees: Нет, анализ браузера не требуется. Этот базовый метод все еще работает: вам просто нужно временно добавить тестовый div в документ. Поскольку существует вероятность того, что события мутации DOM станут асинхронными в большем количестве браузеров в будущем, вы должны учесть это, возможно, с помощью таймера. - person Tim Down; 19.04.2011
comment
@Kees: Вот пример функционального теста DOMAttrModified, который, к сожалению, зависит от синхронного срабатывания события: "nofollow noreferrer">github.com/dperini/nwevents/blob/ Я получил это из этой статьи: perfectionkills.com/ - person Tim Down; 19.04.2011
comment
@ Тим - спасибо за отзыв. Я делал это раньше, но вчера вечером не было времени протестировать код. Я помню, что где-то это было асинхронно, но вы правы. Я только что проверил это, и, похоже, его нет ни в одном браузере. - person Mark Kahn; 19.04.2011

arrow_upward
3
arrow_downward

Оформить заказ на http://www.modernizr.com

person hnprashanth    schedule 19.04.2011
comment
Мне не хватает поддержки для прослушивания событий DOM. - person Kees C. Bakker; 19.04.2011

arrow_upward
0
arrow_downward

Чтобы ответить на общий вопрос — как мне анализировать функции — я использую объект jQuery.support.

person Andrew    schedule 19.04.2011
comment
Кажется, я не нахожу поддержки для DOMNodeInserted. - person Kees C. Bakker; 19.04.2011
comment
@Kees, это конкретно. У меня был ответ только для универсального. - person Andrew; 04.05.2011