Когда я должен наблюдать события Javascript в window по сравнению с document по сравнению с document.body?

#javascript #cross-browser #prototypejs #dom-events

#javascript #кроссбраузерность #prototypejs #dom-события

Вопрос:

Я использую prototype.js для моего веб-приложения, и у меня все запущено в Chrome, Safari и Firefox. Сейчас я работаю над совместимостью с IE8.

Во время отладки в IE я заметил, что есть события Javascript, для которых я ранее установил наблюдателя в окне, например

 Event.observe(window, eventType, function () {...});

(где eventType может быть "dom:loaded" , "keypress" и т.д.) И это отлично работает в Chrome / Safari / Firefox. Однако в IE наблюдатель никогда не срабатывает.

По крайней мере, в некоторых случаях я мог бы заставить это работать в IE, вместо этого поместив observer на что-то другое, чем window , например document (в случае "dom:loaded" ) или document.body (в случае "keypress" ). Однако это все методом проб и ошибок.

Есть ли какой-либо более систематический способ определить, где разместить этих наблюдателей, чтобы результаты были совместимы с кроссбраузерностью?

Ответ №1:

(Это не очень всеобъемлющий ответ, но, похоже, он работает эмпирически — так что, надеюсь, эти эмпирические правила будут полезны другим.)

В общем, регистрируйте события в document , а не window . Браузеры Webkit и mozilla, похоже, довольны и тем, и другим, но IE не реагирует на большинство событий, зарегистрированных в окне, поэтому вам нужно использовать document для работы с IE
Исключение: resize и события, связанные с загрузкой, выгрузкой и открытием / закрытием, должны быть установлены в окне.
Исключение из первого исключения: dom:loaded должно быть включено document в IE.
Еще одно исключение: при обнаружении нажатий клавиш в Mozilla с включенной функцией поиска по мере ввода установите наблюдатели ключевых событий на window , а не на document . Если вы сделаете последнее, функция поиска по мере ввода, похоже, заблокирует событие.

1. Есть ли какие-либо обновления по этому вопросу случайно?

2. Обратите внимание, что в Firefox Quantum, если вы включите опцию «Поиск текста при начале ввода», window.addEventListener('keyup', handler) также НЕ будет работать.

Ответ №2:

Документация объекта различных браузеров (например, window в MSDN, document в MDC) определяет, какие события поддерживаются в объекте. Вы могли бы начать с этого.

1. Документы не особенно хорошо объясняют это.

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

3. Это потому, что onresize отображается window.prototype в IE. Это в документе.

4. Ах-ха! window.prototype Спасибо Alsciende.