Последнее обновление: 28 октября 2020 г.

Определяем поддержку события 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');

5. tmp_div.id = idd;
6. tmp_div1.id = idd1;
7. document.body.appendChild(tmp_div);
8. document.body.appendChild(tmp_div1);

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

10. tmp_div.textContent = '2';
11. }

12. var flag = 'DOMNodeInserted-NO';
13. if(document.getElementById(idd1)){
14. if(document.getElementById(idd1).textContent == 'OK'){
15. flag = 'DOMNodeInserted-YES';
16. }
17. document.getElementById(idd).parentNode.removeChild(document.getElementById(idd));
18. document.getElementById(idd1).parentNode.removeChild(document.getElementById(idd1));
19. }
20. alert(flag)
21. })()

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

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

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

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

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

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

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

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

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

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

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

1. Internet Explorer (всеми версиями, вплоть до IE11 включительно),
2. Firefox (до версии 16, как минимум)
3. Chrome 17-33 (под Android),
4. Chrome 1-26, 76-79 (под Windows)
5. Chrome 24 (под Linux)
6. Chrome 61-74 (под Mac OS X)
7. Opera Mini (разных версий)
8. Opera 9-16
9. Chrome Mobile (до версии 28 включительно, как минимум)
10. Chrome, установленные на MacOS
11. Dolfin (версия 2)
12. NokiaBrowser (как минимум, до версии 7.3)
13. Chromium (версия 25, под Linux)
14. Mobile Safari на iPad/iPhone (вплоть до версии 7 включительно, начиная с 8-й версии - поддерживается)
15. Android (по крайней мере, до версии 6 включительно)

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