Обработка событий event javascript

Порядок обработки событий

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/event-loop.

События могут возникать не только по очереди, но и «пачкой» по много сразу. Возможно и такое, что во время обработки одного события возникают другие, например пока выполнялся код для onclick – посетитель нажал кнопку на клавиатуре (событие keydown ).

Здесь мы разберём, как браузер обычно работает с одновременно возникающими событиями и какие есть исключения из общего правила.

Главный поток

В каждом окне выполняется только один главный поток, который занимается выполнением JavaScript, отрисовкой и работой с DOM.

Он выполняет команды последовательно, может делать только одно дело одновременно и блокируется при выводе модальных окон, таких как alert .

Есть и другие, служебные потоки, например, для сетевых коммуникаций.

Поэтому скачивание файлов может продолжаться пока главный поток ждёт реакции на alert . Но управлять служебными потоками мы не можем.

Существует спецификация Web Workers, которая позволяет запускать дополнительные JavaScript-процессы(workers).

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

Такие дополнительные процессы не имеют доступа к DOM, поэтому они полезны, преимущественно, при вычислениях, чтобы загрузить несколько ядер/процессоров одновременно.

Очередь событий

Произошло одновременно несколько событий или во время работы одного случилось другое – как главному потоку обработать это?

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

Поэтому используется альтернативный подход.

Когда происходит событие, оно попадает в очередь.

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

Иногда события добавляются в очередь сразу пачкой.

Например, при клике на элементе генерируется несколько событий:

1. Сначала mousedown – нажата кнопка мыши.
2. Затем mouseup – кнопка мыши отпущена и, так как это было над одним элементом, то дополнительно генерируется click (два события сразу).

  <script>area.onmousedown = function(e) < this.value += "mousedown\n"; this.scrollTop = this.scrollHeight; >; area.onmouseup = function(e) < this.value += "mouseup\n"; this.scrollTop = this.scrollHeight; >; area.onclick = function(e) < this.value += "click\n"; this.scrollTop = this.scrollHeight; >;</script> </code></pre> <p>Таким образом, при нажатии кнопки мыши в очередь попадёт событие mousedown , а при отпускании – сразу два события: mouseup и click . Браузер обработает их строго одно за другим: mousedown → mouseup → click .</p> <p>При этом каждое событие из очереди обрабатывается полностью отдельно от других.</p> <h2 id="vlozhennye-sinhronnye-sobytiya">Вложенные (синхронные) события</h2> <p>Обычно возникающие события «становятся в очередь».</p> <p>Но в тех случаях, когда событие инициируется не посетителем, а кодом, то оно, как правило, обрабатывается синхронно, то есть прямо сейчас.</p> <p>Рассмотрим в качестве примера событие onfocus .</p> <h3 id="primer-sobytie-onfocus">Пример: событие onfocus</h3> <p>Когда посетитель фокусируется на элементе, возникает событие onfocus . Обычно оно происходит, когда посетитель кликает на поле ввода, например:</p> <pre><p>При фокусе на поле оно изменит значение.</p> </pre> <p>Но ту же фокусировку можно вызвать и явно, вызовом метода elem.focus() :</p> <pre><code>  <script>// сфокусируется на input и вызовет обработчик onfocus elem.focus();</script> </code></pre> <p>В главе Фокусировка: focus/blur мы познакомимся с этим событием подробнее, а пока – нажмите на кнопку в примере ниже.</p> <p>При этом обработчик onclick вызовет метод focus() на текстовом поле text . Код обработчика onfocus , который при этом запустится, сработает синхронно, прямо сейчас, до завершения onclick .</p> <pre><code>   <script>button.onclick = function() < text.value += ' ->в onclick '; text.focus(); // вызов инициирует событие onfocus text.value += ' из onclick-> '; >; text.onfocus = function() < text.value += ' !focus! '; >;</script> </code></pre> <p>При клике на кнопке в примере выше будет видно, что управление вошло в onclick , затем перешло в onfocus , затем вышло из onclick .</p> <p>Так ведут себя все браузеры, кроме IE.</p> <p>В нём событие onfocus – всегда асинхронное, так что будет сначала полностью обработан клик, а потом – фокус. В остальных – фокус вызовется посередине клика. Попробуйте кликнуть в IE и в другом браузере, чтобы увидеть разницу.</p> <h2 id="delaem-sobytiya-asinhronnymi-cherez-settimeout">Делаем события асинхронными через setTimeout(…,0)</h2> <p>А что, если мы хотим, чтобы <em>сначала</em> закончилась обработка onclick , а потом уже произошла обработка onfocus и связанные с ней действия?</p> <p>Один вариант – просто переместить строку text.focus() вниз кода обработчика onclick .</p> <p>Если это неудобно, можно запланировать text.focus() чуть позже через setTimeout(. 0) , вот так</p> <pre><code>   <script>button.onclick = function() < text.value += ' ->в onclick '; setTimeout(function() < text.focus(); // сработает после onclick >, 0); text.value += ' из onclick-> '; >; text.onfocus = function() < text.value += ' !focus! '; >;</script> </code></pre> <p>Такой вызов обеспечит фокусировку через минимальный «тик» таймера, по стандарту равный 4 мс. Обычно такая задержка не играет роли, а необходимую асинхронность мы получили.</p> <h2 id="itogo">Итого</h2> <ul> <li>JavaScript выполняется в едином потоке. Современные браузеры позволяют порождать подпроцессы Web Workers, они выполняются параллельно и могут отправлять/принимать сообщения, но не имеют доступа к DOM.</li> <li>Обычно события становятся в очередь и обрабатываются в порядке поступления, асинхронно, независимо друг от друга.</li> <li>Синхронными являются вложенные события, инициированные из кода.</li> <li>Чтобы сделать событие гарантированно асинхронным, используется вызов через setTimeout(func, 0) .</li> </ul> <p>Отложенный вызов через setTimeout(func, 0) используется не только в событиях, а вообще – всегда, когда мы хотим, чтобы некая функция func сработала после того, как текущий скрипт завершится.</p> <p><a href="https://learn.javascript.ru/events-and-timing-depth">Источник</a></p> <h2 id="obekt-sobytiya-event">Объект события Event</h2> <p>Объект Event описывает событие, произошедшее на странице. Одной из причин возникновения событий являются действия пользователя, такие как клики мышкой Mouse Event или ввод с клавиатуры Keyboard Event . Существует множество различных событий с разным набором информации.</p> <p>Обратите внимание на обзорную статью о событиях. В ней описываются примеры работы с событиями.</p> <h2 id="primer">Пример</h2> <p>Скопировать ссылку «Пример» Скопировано</p> <p>Самый простой и широко распространённый способ использования событий — это отслеживание срабатывания кликов по каким-либо элементам на странице.</p> <p>При подписке на событие мы передаём обработчик, который будет вызван при каждом срабатывании события в браузере. В случае, когда происходит событие типа click , обработчик будет вызван с событием Mouse Event :</p> <pre> <span tabindex="0"><code ><span >element.addEventListener('click', function (event)  <span >console.log(event)</span><span >>)</span></code> <code >element<span >.</span><span >addEventListener</span><span >(</span><span >'click'</span><span >,</span> <span >function</span> <span >(</span><span >event</span><span >)</span> <span > <span >console</span><span >.</span><span >log</span><span >(</span>event<span >)</span> <span >></span><span >)</span> </code> </span> <span aria-live="polite"> <button type="button" data-state="idle"><span data-state="idle">Скопировать</span> <span data-state="success">Скопировано</span> <span data-state="error">Не удалось скопировать</span> </button> </span> </pre> <h2 id="kak-pishetsya">Как пишется</h2> <p>Скопировать ссылку «Как пишется» Скопировано</p> <p>В этом материале мы рассматриваем базовый объект события, каждое событие может содержать дополнительные свойства в зависимости от его типа, но список ниже есть у всех.</p> <h3 id="svoystva">Свойства</h3> <p>Скопировать ссылку «Свойства» Скопировано</p> <ul> <li>bubbles — является ли данное событие всплывающим.</li> <li>cancelable — является ли событие отменяемым.</li> <li>current Target — указывает на элемент, на котором установлен обработчик события.</li> <li>default Prevented — отменено ли поведение события по умолчанию.</li> <li>event Phase — указывает на фазу срабатывания события.</li> <li>is Trusted — указывает на происхождение события, будет в значении true , если событие инициировано действиями пользователя. false — если событие инициировано из кода с помощью dispatch Event ( ) .</li> <li>target — ссылка на объект, которым было инициировано событие. Например, если событие произошло на поле ввода, мы получим ссылку на этот DOM элемент.</li> <li>time Stamp — время возникновения события в миллисекундах.</li> <li>type — тип события.</li> </ul> <h3 id="metody">Методы</h3> <p>Скопировать ссылку «Методы» Скопировано</p> <ul> <li>composed Path ( ) — вернёт массив элементов, на которых сработает событие.</li> <li>prevent Default ( ) — предотвращает дефолтное поведение события. Если вызвать этот метод на событии клика по ссылке, то переход по ссылке не произойдёт, но событие продолжит всплытие.</li> <li>stop Propagation ( ) — предотвращает всплытие события.</li> <li>stop Immediate Propagation ( ) — делает то же самое, что и stop Propagation , но в том числе предотвращает вызов обработчиков события, которые были установлены на этом же элементе.</li> </ul> <p>Обработчики событий, установленные на элемент, вызываются по порядку их установки.</p> <h2 id="kak-ponyat">Как понять</h2> <p>Скопировать ссылку «Как понять» Скопировано</p> <p>Работа JavaScript основана на событийной модели — это значит, что для того, чтобы запустить какой-либо код, должно произойти событие. Даже код, который был написан в файле и не привязан к какому-либо событию, будет обработан после того, как произойдёт событие, которое сообщит браузеру, что код был загружен.</p> <p>Событие может быть создано по следующим причинам:</p> <h3 id="primery">Примеры</h3> <p>Скопировать ссылку «Примеры» Скопировано</p> <h4 id="sistemnoe-sobytie">Системное событие</h4> <p>Скопировать ссылку «Системное событие» Скопировано</p> <p>Системное событие инициируется DOM-окружением и является отражением какого-то события, произошедшего в операционной системе. Например, событие, что пользователь находится онлайн. То есть на наличие активного интернет-соединения.</p> <p>Мы можем отслеживать состояние интернет-соединения и показывать сообщение, если оно пропало.</p> <pre> <span tabindex="0"><code ><span >window.addEventListener('offline', function()  <span >alert('Отсутствует подключение к интернету')</span><span >>)</span></code> <code ><span >window</span><span >.</span><span >addEventListener</span><span >(</span><span >'offline'</span><span >,</span> <span >function</span><span >(</span><span >)</span> <span > <span >alert</span><span >(</span><span >'Отсутствует подключение к интернету'</span><span >)</span> <span >></span><span >)</span> </code> </span> <span aria-live="polite"> <button type="button" data-state="idle"><span data-state="idle">Скопировать</span> <span data-state="success">Скопировано</span> <span data-state="error">Не удалось скопировать</span> </button> </span> </pre> <h4 id="programmnoe-sobytie">Программное событие</h4> <p>Скопировать ссылку «Программное событие» Скопировано</p> <p>Событие может быть создано с помощью кода, поле is Trusted в таком событии будет содержать значение false , а значит, мы будем знать, что событие было вызвано не системно и не пользователем.</p> <p>Создадим своё событие и вызовем его на window :</p> <pre> <span tabindex="0"><code ><span >const myEvent = new CustomEvent('my-event',  <span >detail:  <span >spicy: 123,</span> <span >>,</span><span >>)</span> <span >window.addEventListener('my-event', function(evt)  <span >console.log('В поле spicy:', evt.detail.spicy)</span><span >>)</span> <span >window.dispatchEvent(myEvent)</span></code> <code ><span >const</span> myEvent <span >=</span> <span >new</span> <span >CustomEvent</span><span >(</span><span >'my-event'</span><span >,</span> <span > <span >detail</span><span >:</span> <span > <span >spicy</span><span >:</span> <span >123</span><span >,</span> <span >></span><span >,</span> <span >></span><span >)</span> <span >window</span><span >.</span><span >addEventListener</span><span >(</span><span >'my-event'</span><span >,</span> <span >function</span><span >(</span><span >evt</span><span >)</span> <span > <span >console</span><span >.</span><span >log</span><span >(</span><span >'В поле spicy:'</span><span >,</span> evt<span >.</span><span >detail</span><span >.</span><span >spicy</span><span >)</span> <span >></span><span >)</span> <span >window</span><span >.</span><span >dispatchEvent</span><span >(</span>myEvent<span >)</span> </code> </span> <span aria-live="polite"> <button type="button" data-state="idle"><span data-state="idle">Скопировать</span> <span data-state="success">Скопировано</span> <span data-state="error">Не удалось скопировать</span> </button> </span> </pre> <h2 id="na-praktike">На практике</h2> <p>Скопировать ссылку «На практике» Скопировано</p> <h3 id="pavel-mineev-sovetuet">Павел Минеев советует</h3> <p>Скопировать ссылку «Павел Минеев советует» Скопировано</p> <p>🛠 В событии есть два похожих поля: target и current Target . Их отличие легко увидеть на примере.</p> <pre> <span tabindex="0"><code > <span > <span ><span>Моя кнопочка</span></span> </span></code> <code ><span ><span ><span >button</span> <span >class</span><span ><span >=</span><span >"</span>button<span >"</span></span> <span >type</span><span ><span >=</span><span >"</span>button<span >"</span></span><span >></span></span> <span ><span ><span >span</span><span >></span></span>Моя кнопочка<span ><span ><span ></</span>span</span><span >></span></span> <span ><span ><span ></</span>button</span><span >></span></span> </code> </span> <span aria-live="polite"> <button type="button" data-state="idle"><span data-state="idle">Скопировать</span> <span data-state="success">Скопировано</span> <span data-state="error">Не удалось скопировать</span> </button> </span> </pre> <pre> <span tabindex="0"><code ><span >document.querySelector('.button').addEventListener('click', function (event)  <span >console.log('Событие инициировано на', event.target)</span> <span >console.log('Событие поймано на', event.currentTarget)</span><span >>)</span></code> <code ><span >document</span><span >.</span><span >querySelector</span><span >(</span><span >'.button'</span><span >)</span><span >.</span><span >addEventListener</span><span >(</span><span >'click'</span><span >,</span> <span >function</span> <span >(</span><span >event</span><span >)</span> <span > <span >console</span><span >.</span><span >log</span><span >(</span><span >'Событие инициировано на'</span><span >,</span> event<span >.</span><span >target</span><span >)</span> <span >console</span><span >.</span><span >log</span><span >(</span><span >'Событие поймано на'</span><span >,</span> event<span >.</span><span >currentTarget</span><span >)</span> <span >></span><span >)</span> </code> </span> <span aria-live="polite"> <button type="button" data-state="idle"><span data-state="idle">Скопировать</span> <span data-state="success">Скопировано</span> <span data-state="error">Не удалось скопировать</span> </button> </span> </pre> <p>current Target всегда будет элементом, к которому привязан обработчик, то есть элементом, на котором вызывался add Event Listener ( ) .</p> <p>target — это элемент, на котором произошло событие. Оно может не совпадать с current Target , потому что большинство событий всплывают.</p> <p><a href="https://doka.guide/js/event/">Источник</a></p> <div class="fpm_end"></div><div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://business-programming.ru/php-nayti-teg-img/" target="_blank" rel="dofollow" class="u84566bd22d53c2518d31d37b2b6d97df"><!-- INLINE RELATED POSTS 1/3 //--><style> .u84566bd22d53c2518d31d37b2b6d97df { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .u84566bd22d53c2518d31d37b2b6d97df:active, .u84566bd22d53c2518d31d37b2b6d97df:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u84566bd22d53c2518d31d37b2b6d97df { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u84566bd22d53c2518d31d37b2b6d97df .ctaText { font-weight:bold; color:#464646; text-decoration:none; font-size: 16px; } .u84566bd22d53c2518d31d37b2b6d97df .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .u84566bd22d53c2518d31d37b2b6d97df:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">Читайте также:</span>  <span class="postTitle">Php найти тег img</span></div></a></div> </div><!-- .entry-content --> </article> <div class="rating-box"> <div class="rating-box__header">Оцените статью</div> <div class="wp-star-rating js-star-rating star-rating--score-0" data-post-id="271796" data-rating-count="0" data-rating-sum="0" data-rating-value="0"><span class="star-rating-item js-star-rating-item" data-score="1"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="2"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="3"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="4"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="5"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span></div> </div> <div class="entry-social"> <div class="social-buttons"><span class="social-button social-button--vkontakte" data-social="vkontakte" data-image=""></span><span class="social-button social-button--facebook" data-social="facebook"></span><span class="social-button social-button--telegram" data-social="telegram"></span><span class="social-button social-button--odnoklassniki" data-social="odnoklassniki"></span><span class="social-button social-button--twitter" data-social="twitter"></span><span class="social-button social-button--sms" data-social="sms"></span><span class="social-button social-button--whatsapp" data-social="whatsapp"></span></div> </div> <meta itemprop="author" content="admin"> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://business-programming.ru/obrabotka-sobytiy-event-javascript/" content="Обработка событий event javascript"> <meta itemprop="dateModified" content="2023-08-29"> <meta itemprop="datePublished" content="2023-09-01T19:05:04+03:00"> <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization" style="display: none;"><meta itemprop="name" content="Программирование"><meta itemprop="telephone" content="Программирование"><meta itemprop="address" content="https://business-programming.ru"></div> </main><!-- #main --> </div><!-- #primary --> <aside id="secondary" class="widget-area" itemscope itemtype="http://schema.org/WPSideBar"> <div class="sticky-sidebar js-sticky-sidebar"> <div id="block-2" class="widget widget_block"><div class="flatPM_sidebar" data-top="70"> <div id="Q_sidebar"></div> </div></div> </div> </aside><!-- #secondary --> <div id="related-posts" class="related-posts fixed"><div class="related-posts__header">Вам также может понравиться</div><div class="post-cards post-cards--vertical"> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://business-programming.ru/yaschiki-s-usami-python/">Ящики с усами python</a></div><div class="post-card__description">pandas.plotting.boxplot# Make a box-and-whisker plot</div> </div> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://business-programming.ru/primer-ispolzovaniya-svoystva-css-table-layout-74/">Пример использования свойства CSS table-layout.</a></div><div class="post-card__description">table-layout¶ Свойство table-layout определяет, как</div> </div> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://business-programming.ru/primer-ispolzovaniya-svoystva-css-table-layout-73/">Пример использования свойства CSS table-layout.</a></div><div class="post-card__description">HTML Размеры таблицы HTML таблицы могут иметь разные</div> </div> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://business-programming.ru/primer-ispolzovaniya-svoystva-css-table-layout-72/">Пример использования свойства CSS table-layout.</a></div><div class="post-card__description">table-layout¶ Свойство table-layout определяет, как</div> </div> </div></div> </div><!--.site-content-inner--> </div><!--.site-content--> <div class="site-footer-container "> <div class="footer-navigation fixed" itemscope itemtype="http://schema.org/SiteNavigationElement"> <div class="main-navigation-inner full"> <div class="menu-tehnicheskoe-menyu-container"><ul id="footer_menu" class="menu"><li id="menu-item-12637" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12637"><a href="https://business-programming.ru/pravoobladatelyam/">Правообладателям</a></li> <li id="menu-item-12638" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12638"><a href="https://business-programming.ru/politika-konfidentsialnosti/">Политика конфиденциальности</a></li> <li id="menu-item-12639" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12639"><a href="https://business-programming.ru/kontakty/">Контакты</a></li> </ul></div> </div> </div><!--footer-navigation--> <footer id="colophon" class="site-footer site-footer--style-gray full"> <div class="site-footer-inner fixed"> <div class="footer-bottom"> <div class="footer-info"> © 2024 Программирование </div> <div class="footer-counters"><!-- Yandex.Metrika counter --> <script type="text/javascript" >
   (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
   m[i].l=1*new Date();
   for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
   k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

   ym(97921369, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true,
        webvisor:true
   });
</script> <noscript><div><img src="https://mc.yandex.ru/watch/97921369" style="position:absolute; left:-9999px;" alt=""/></div></noscript> <!-- /Yandex.Metrika counter --></div></div> </div> </footer><!--.site-footer--> </div> <button type="button" class="scrolltop js-scrolltop"></button> </div><!-- #page --> <script>var pseudo_links = document.querySelectorAll(".pseudo-clearfy-link");for (var i=0;i<pseudo_links.length;i++ ) { pseudo_links[i].addEventListener("click", function(e){   window.open( e.target.getAttribute("data-uri") ); }); }</script><script type="text/javascript" id="reboot-scripts-js-extra">
/* <![CDATA[ */
var settings_array = {"rating_text_average":"\u0441\u0440\u0435\u0434\u043d\u0435\u0435","rating_text_from":"\u0438\u0437","lightbox_display":"1","sidebar_fixed":"1"};
var wps_ajax = {"url":"https:\/\/business-programming.ru\/wp-admin\/admin-ajax.php","nonce":"8175b0a921"};
/* ]]> */
</script> <script type="text/javascript" src="https://business-programming.ru/wp-content/themes/reboot/assets/js/scripts.min.js" id="reboot-scripts-js"></script> <script>window.lazyLoadOptions = [{
                elements_selector: "img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",
                data_src: "lazy-src",
                data_srcset: "lazy-srcset",
                data_sizes: "lazy-sizes",
                class_loading: "lazyloading",
                class_loaded: "lazyloaded",
                threshold: 300,
                callback_loaded: function(element) {
                    if ( element.tagName === "IFRAME" && element.dataset.rocketLazyload == "fitvidscompatible" ) {
                        if (element.classList.contains("lazyloaded") ) {
                            if (typeof window.jQuery != "undefined") {
                                if (jQuery.fn.fitVids) {
                                    jQuery(element).parent().fitVids();
                                }
                            }
                        }
                    }
                }},{
				elements_selector: ".rocket-lazyload",
				data_src: "lazy-src",
				data_srcset: "lazy-srcset",
				data_sizes: "lazy-sizes",
				class_loading: "lazyloading",
				class_loaded: "lazyloaded",
				threshold: 300,
			}];
        window.addEventListener('LazyLoad::Initialized', function (e) {
            var lazyLoadInstance = e.detail.instance;

            if (window.MutationObserver) {
                var observer = new MutationObserver(function(mutations) {
                    var image_count = 0;
                    var iframe_count = 0;
                    var rocketlazy_count = 0;

                    mutations.forEach(function(mutation) {
                        for (var i = 0; i < mutation.addedNodes.length; i++) {
                            if (typeof mutation.addedNodes[i].getElementsByTagName !== 'function') {
                                continue;
                            }

                            if (typeof mutation.addedNodes[i].getElementsByClassName !== 'function') {
                                continue;
                            }

                            images = mutation.addedNodes[i].getElementsByTagName('img');
                            is_image = mutation.addedNodes[i].tagName == "IMG";
                            iframes = mutation.addedNodes[i].getElementsByTagName('iframe');
                            is_iframe = mutation.addedNodes[i].tagName == "IFRAME";
                            rocket_lazy = mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');

                            image_count += images.length;
			                iframe_count += iframes.length;
			                rocketlazy_count += rocket_lazy.length;

                            if(is_image){
                                image_count += 1;
                            }

                            if(is_iframe){
                                iframe_count += 1;
                            }
                        }
                    } );

                    if(image_count > 0 || iframe_count > 0 || rocketlazy_count > 0){
                        lazyLoadInstance.update();
                    }
                } );

                var b      = document.getElementsByTagName("body")[0];
                var config = { childList: true, subtree: true };

                observer.observe(b, config);
            }
        }, false);</script><script data-no-minify="1" async src="https://business-programming.ru/wp-content/plugins/rocket-lazy-load/assets/js/16.1/lazyload.min.js"></script><script>function lazyLoadThumb(e,alt){var t='<img loading="lazy" src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360">',a='<button class="play" aria-label="play Youtube video"></button>';t=t.replace('alt=""','alt="'+alt+'"');return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.parentNode.dataset.query.length?'':'&'+this.parentNode.dataset.query;e.setAttribute("src",t.replace("ID",this.parentNode.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.parentNode.replaceChild(e,this.parentNode)}document.addEventListener("DOMContentLoaded",function(){var e,t,p,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id,a[t].dataset.alt),a[t].appendChild(e),p=e.querySelector('.play'),p.onclick=lazyLoadYoutubeIframe});</script> </body> </html>