Номер телефона

Последнее обновление:

Определяем поддержку события DOMNodeInserted браузером

Событие DOMNodeInserted предназначено для контроля изменений в DOM-структуре вебстраницы. Оно относится к событиям типа Mutation events. Они, к сожалению, признаны устаревшими (deprecated) – по той причине, что неразумное их использование сильно нагружает браузер, замедляя работы открытой в нем вебстраницы. Кроме того, как сообщает Mozilla, даже удаление обработчиков неспособно вернуть нормальную скорость функционирования страницы (после ее обновления, если не назначать обработчики этого события, разумеется, никакого замедления не будет).

Однако, если использовать их С УМОМ (т.е. если, к примеру, не назначать для них обработчики на 100500 тегов – элементов DOM, как делают некоторые «особо продвинутые и современные» вебмастера), то оно оказывается очень удобным. Правда, оно не очень кроссбраузерно. Например, не поддерживается некоторыми браузерами, например, Internet Explorer. Сейчас вместо них рекомендуется использовать Mutation Observers.

Вообще, перечень событий вида Mutation events достаточно широк. Подробно с ними можно ознакомиться в документации (см. ссылку выше). Мы же здесь рассмотрим только событие DOMNodeInserted.

Программный код

Итак, посмотрим код, при помощи которого можно определить, поддерживается ли это событие браузером:

  1. (function(){var idd = 'q1qazxsw', idd1 = 'q1qazxsw1'; var x;
  2. if (document.implementation.hasFeature("Mutation events", "2.0")) {
  3. var tmp_div = document.createElement('div');
  4. var tmp_div1 = document.createElement('div');


  1. tmp_div.id = idd;
  2. tmp_div1.id = idd1;
  3. document.body.appendChild(tmp_div);
  4. document.body.appendChild(tmp_div1);

  1. tmp_div1.textContent = '';
    1. tmp_div.addEventListener("DOMNodeInserted", function (event) {
      1. tmp_div1.textContent = 'OK';
    2. }, false);

  1. tmp_div.textContent = '2';
  2. }

  1. var flag = 'DOMNodeInserted-NO';
  2. if(document.getElementById(idd1)){
  3. if(document.getElementById(idd1).textContent == 'OK'){
  4. flag = 'DOMNodeInserted-YES';
  5. }
  6. document.getElementById(idd).parentNode.removeChild(document.getElementById(idd));
  7. document.getElementById(idd1).parentNode.removeChild(document.getElementById(idd1));
  8. }
  9. alert(flag)
  10. })()

Что здесь происходит?

Вначале проверяем, поддерживаются ли браузером события Mutation events хотя бы теоретически. Если нет, то переменная flag примент значение 'DOMNodeInserted-NO' и оно уже не изменится. Именно оно и будет показано в сообщении alert().

Если же поддерживается, то создаем два временных блока div. На один из них назначаем обработчик этого события, который, сработав, запишет во второй блок текст «OK». Если же обработчик события DOMNodeInserted НЕ сработает (несмотря на общую поддержку Mutation events), то во второй блок так ничего и не будет записано.

После того, как создался обработчик, записываем в первый блок текст «2» - для того, чтобы попытаться вызвать обработчик.

Таким образом, если обработчик сработает, то во втором блоке (с id=”q1qazxsw1”) появится текстовое содержимое «OK». А если нет – то он останется пустым. И дальше анализируем – каково содержимое второго блока. Если обнаруживаем, что там появилось «OK», стало быть, обработчик срабатывал. Ну, а если нет – и суда нет, как говорится.

Окончательно, удаляем указанные временные блоки div (так как они больше не нужны), чтобы не засорять DOM-структуру вебстраницы и выводим сообщение о том, поддерживается ли обработчик события DOMNodeInserted или нет.

Вот что показывают данные сервиса caniuse.com:


Поддержка события DOMNodeInserted различными браузерами

К сожалению, конкретно для DOMNodeInserted данных нет, они имеются только в целом по событиям Mutation events. Судя по этим данным, полностью эти события поддерживались лишь в некоторых версиях браузеров Opera. Но, более современные версии даже этого браузера уже имеют частичную поддержку.

Здесь, конечно, остается гадать, что и как. Скорее всего, были удалены наиболее ресурсоемкие события из системы Mutation events.

Что означает частичная поддержка – сказать, опять же, сложно без анализа. Например, чтобы узнать, поддерживается ли событие DOMNodeInserted конкретно Вашим браузером, нажмите эту .

Что касается некоторых других браузеров, то вот кое-какие данные на этот счет

Судя по нашему опыту, событие DOMNodeInserted НЕ поддерживается следующими браузерами:

  1. Internet Explorer (всеми версиями, вплоть до IE11 включительно),
  2. Chrome 30 (под Android),
  3. Opera Mini (разных версий)
  4. Opera 12-16
  5. Chrome Mobile
  6. Chrome, установленные на MacOS
  7. Mobile Safari на iPad (по крайней мере, вплоть до версии 5.1 включительно)
  8. Android (по крайней мере, до версии 4.3 включительно)

Так что, как видим, подавляющее большинство браузеров все-таки (на ноябрь 2020 г.) поддерживают событие DOMNodeInserted. Но, есть и такие, которые этого не делают. Вообще, честно говоря, удивили (в отрицательном смысле) Chrome и, особенно, Android... Поэтому, это событие следует использовать лишь для неосновной (дополнительной) функциональности сайта. Чтобы отсутствие его поддержки не препятствовало функционированию сайта в целом.

Этот совет - для тех, кто делает сайты для (всех) людей, а не для роботов и "современных браузеров".

Комментарии:
Всего комментариев:0
Пожалуйста, не забудьте ознакомиться с правилами оставления комментариев.



Подписаться на комментарии на этой странице

Мы можем выполнить

Другие услуги
Интересная и полезная
информация
НАПИШИТЕ НАМ
Яндекс.Метрика
Номер телефона
© Copyright Все права защищены 2013-