diff options
Diffstat (limited to 'files/ru/web/guide/events/overview_of_events_and_handlers')
| -rw-r--r-- | files/ru/web/guide/events/overview_of_events_and_handlers/index.html | 130 |
1 files changed, 130 insertions, 0 deletions
diff --git a/files/ru/web/guide/events/overview_of_events_and_handlers/index.html b/files/ru/web/guide/events/overview_of_events_and_handlers/index.html new file mode 100644 index 0000000000..b9f689caa2 --- /dev/null +++ b/files/ru/web/guide/events/overview_of_events_and_handlers/index.html @@ -0,0 +1,130 @@ +--- +title: Обзор событий и обработчиков +slug: Web/Guide/Events/Overview_of_Events_and_Handlers +translation_of: Web/Guide/Events/Overview_of_Events_and_Handlers +--- +<div class="summary"> +<p>Эта обзорная статья о событиях и их обработчиках описывает шаблон проектирования кода, который используется для реагирования на события, возникающие, когда браузер получает доступ к web-странице, и содержит подборку типов подобных событий, которые современные брауезеры могут обрабатывать.</p> +</div> + +<p>События и их обработчики представляют собой основную технику в JavaScript для реагирования на события, возникающие, когда браузер получает доступ к web-странице, включая события о подготовке страницы к отображению, взаимодействии с ее содержимым, в зависимости от устройства, на котором браузер был запущен, и многие другие случаи, такие как воспроизведение потоковой медиа-информации или расчет времени анимации.</p> + +<p>События и обработчики событий заняли центральное место в web-программировании с добавлением языка в браузеры, сопровождая смену архитектуры рендеринга от перехвата и загрузки страницы к управлению с помощью событий, основанном на перекомпановке (reflow). Сначала браузер ожидает, пока он получит все ресурсы, связанные со страницей, чтобы проанализировать, обработать, отрисовать и предоставить страницу пользователю. Отрисованная страница остается неизменной, пока браузер не запросит новую. С изменением в подходе к рендерингу динамической страницы, браузер непрерывно зацикливается между обработкой, отрисовкой, представлением содержимого и ожиданием некоторого нового триггера события. Триггеры событий включают, например, завершение загрузки ресурса по сети<em>,</em> скачивание изображений, которые теперь могут быть отрисованы на экране, завершение браузером анализа ресурса, обработку HTML-содержимого страницы, взаимодействие пользователя с содержимым страницы<em>,</em> нажатия кнопок. Дуглас Крокфорд хорошо объясняет это изменение в нескольких лекциях, особенно своей речи <em>"Неудобные API: Теория DOM",</em> которая описывает изменения в потоке изначального потока браузера от управляемого событиями браузера.</p> + +<div style="margin: 0 auto; width: 68%;"><img alt="A comparison of the sequential and event-driven browser load sequences." src="https://mdn.mozillademos.org/files/6641/Browser_sequence_comparitive.svg" style="height: 454px; width: 1857px;"></div> + +<p>Второй подход изменяет последние шаги, переходя от просторого потока к бесконечному циклу, где ожидание и обработка возникновения новых событий следует за отрисовкой. Введение динамического подхода позволяет странице быть частично отрендериной, даже когда браузер еще не закончил извлечение всех ресурсов; это так же разрешено для действий, управляемыми событиями, которые JavaScript использует. (Речь доступна на нескольких ресурсах, включая <a href="http://www.youtube.com/watch?v=Y2Y0U-2qJMs">этот</a>.) На данный момент, все среды исполнения JavaScript используют события и их обработчики.</p> + +<h2 id="Шаблон_проектирования_событий">Шаблон проектирования событий</h2> + +<p>Система событий, по своей сути, простой программный шаблон проектирования. Он начинается с соглашения о виде события и:</p> + +<ul> + <li>имени-строки, используемой для собыйтия,</li> + <li>типа структуры данных, используемых для представления ключевых свойств события,</li> + <li>объекта JavaScript, который будет 'вызывать' это событие.</li> +</ul> + +<p>Шаблон реализуется с помощью:</p> + +<ul> + <li>определение JavaScript-функции, которая принимает в качестве аргумента структуру данных, которая была согласована ранее, и</li> + <li>регистрации функции с помощью имени-строки через объект, который будет вызывать событие.</li> +</ul> + +<p>Функция считается "слушателем" или "обработчиком", где оба именами взаимнозаменяемы. Этому шаблону можно легко следовать с использованием полностью пользовательского кода, как объяснено в <a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">статье о пользовательских событиях</a>. Шаблон так же используется современными web-браузерами, определяющими множество событий, которые вызываются в ответ на пользовательский ввод или активность браузера.</p> + +<p>Современные браузеры следуют событийному шаблону, используя стандартизированный подход. В качестве структуры данных для свойств события они применяют объект, полученный от объекта <code>EventPrototype</code>. Для регистратрации функции, которая будет обрабатывать эту структуру даных, используется метод, называемый <code>addEventListener</code>, который ожидает в качестве аргумента имя-строку, соответствующую типу события, и функцию-обработчика. В итоге, браузеры определяют огромное число объектов источников событий и широкое разнообразие типов событий, сформированных объектами.</p> + +<h2 id="Button_Event_Handler" name="Button_Event_Handler">Пример обработчика события кнопки</h2> + +<p>К примеру, браузерный элемент <code>button</code> предназначен для вызова события с именем <code>'click'</code> в ответ на нажатие кнопки мыши или прикосновене пальца к чувствительной части экрана. В HTML мы можем определить <code>button</code> как:</p> + +<pre class="brush: html"><button id="buttonOne">Click here to emit a 'click' event</button></pre> + +<p>и, в коде JavaScript, мы можем сначала определить функцию для прослушивания этого события <code>'click'</code> :</p> + +<pre class="brush: js">var example_click_handler = function (ev){ + var objKind = (ev instanceof Event) ? "EventPrototype" : "ObjectPrototype"; + alert("We got a click event at " + ev.timeStamp + " with an argument object derived from: " + objKind ); +};</pre> + +<p>и затем зарегестрировать свою функцию с помощью объекта <code>Button</code> или со стороны скрипта, используя представление DOM (Document Object Model) на HTML-странице:</p> + +<pre class="brush: js">var buttonDOMElement = document.querySelector('#buttonOne'); +buttonDOMElement.addEventListener('click', example_click_handler);</pre> + +<p>или на самой HTML-странице, добавив функцию как значение атрибута <code>'onclick'</code>, хотя этот вариант обычно используется на очень простых web-страницах.</p> + +<p>{{ EmbedLiveSample('Button_Event_Handler') }}</p> + +<p>Этот код полагается на соглашение о том, что существует некоторый вид события, называемый <code>'click'</code> , который вызовет все функции-слушатели (или 'обработчи') с объектом-аргументом <code>Event</code> (на данный момент, в этом случае производный от объекта <code>MouseEvent</code> ) и будет запущен после манипуляций пользователя с элементами <code>button</code> на HTML-странице. Код не имеет видимого воздействия, пока пользователь не использует кнопки, наводит указатель мыши на элемент HTML и нажимает на левую кнопку или устанавливает палец или стилус на некоторое место на экране, выше кнопки; когда это произойдет, <code>buttonDOMElement</code> объекта JavaScript вызовет функцию <code>example_click_handler</code> с объектом <code>Event</code> в качестве аргумента. Функция, в свою очередь, исполнит любые действия, описанные программистом, в данном случае отрыв диалоговое окно HTML. Заметим, что обработчик имеет доступ к объекту <code>ev</code>, так как тот передается в качестве аргумента; объект содержит информацию о событие, в частности время его возникновения.</p> + +<p>Во втором варианте, интегрирован в web-страницу намного более современный JavaScript обернут в событийный вызов функции, чтобы убедиться, что код будет выполнен только тогда, когда HTML будет обработан и доступен для изменения или декорирования. Например, код может быть объявлен так:</p> + +<pre class="brush: js">var funcInit = function(){ + // user code goes here and can safely address all the HTML elements from the page + // since the document has successfully been 'loaded' +} +document.addEventListener('DOMContentLoaded', funcInit); +</pre> + +<p>так что этот код будет вызван только после того, как объект <code>document</code> вызовет событие <code>'DOMContentLoaded'</code>, потому что HTML был проанализирован и были созданы объекты Javasript, представляющие каждый узел HTML-документа. Заметим, что в этом примере, код даже не передает аргумент события в функцию, потому что тому никогда не понадобится использовать данные, описанные в нем; скорее, код всего лишь нужно подождать, пока не случится событие.</p> + +<p>Шаблон легко изучить и внедрить. Сложность с событиями возникает из-за необходимости изучить большое разнообразие событий, которые представлены в современных web-браузерах. Так же есть некоторая сложность в понимании, как писать обработчики, так как данный код работает ассинхронно и потенциально может быть вызван несколько раз подряд, но в немного другой ситуации.</p> + +<h2 id="Важные_события">Важные события</h2> + +<p>Web-браузеры определяют большое число событий, поэтому не практично описывать их все. <a href="/en-US/docs/Web/Reference/Events">Event Reference</a> призван содержать список стандартных событий, используемых в современных браузерах.</p> + +<p>В общем случае, события различного вида выделяют, основываясь на объекте, который вызывает данное событие, включая:</p> + +<ul> + <li>объект <code>window</code>, на случай изменения размера браузера,</li> + <li>объект <code>window.screen</code>, на случай изменения положения устройства,</li> + <li>объект <code>document</code>, включая загрузку, модификацию, пользовательское взаимодействие и разгрузку страницы,</li> + <li>объект в DOM (объектная модель документа) дереве, включая пользовательское взаимодействие или изменения,</li> + <li>объект <code>XMLHttpRequest</code>, используемый для запросов сети, и</li> + <li>медиа-объекты, такие как <code>audio</code> и <code>video</code>, когда медиа-потоковые плееры изменяют состояние.</li> +</ul> + +<p>хотя этот список на данный момент неполный.</p> + +<p>Некоторые события, которые стоит отметить:</p> + +<div class="note"> +<p><strong>Заметка:</strong> Этот список событий будет нуждаться в доработке, чтобы соответствовать действительности; эта работа ожидает некоторой глобальной реорганизации в документе. Так же нужно найти хорошее объяснение событий, включая события во время загрузки страницы, таких, как частично описаных в <em><a href="http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload">этой статье</a> или <a href="http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page">этом вопросе на Stack Overflow</a>. </em></p> +</div> + +<ul> + <li>глобальный объект <a href="/en-US/docs/Web/API/Window"><code>window</code></a> вызывает событие, называемое <a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)"><code>'load'</code></a>, когда страница закончила рендеринг, подразумевая, что все ресурсы были скачаны и применены, так что скрипт был выполнен и изображения отображены,</li> + <li>глобальный объект <a href="/en-US/docs/Web/API/Window"><code>window</code></a> вызывает событие, называемое <a href="/en-US/docs/Web/Reference/Events/resize"><code>'resize'</code></a>, когда высота или ширина окна браузера была измененеа пользователем,</li> + <li>объект DOM <a href="/en-US/docs/Web/API/Document"><code>document</code></a>, представляющий HTML-документ, вызывает событие, называемое <code><a href="/en-US/docs/Web/Reference/Events/DOMContentLoaded">'DOMContentLoaded'</a></code>, когда документ закончил загрузку,</li> + <li>объект узла DOM, такой как <a href="/en-US/docs/Web/HTML/Element/div"><code>div</code></a> или <a href="/en-US/docs/Web/HTML/Element/button"><code>button</code></a>, вызывающий событие, называемое <a href="/en-US/docs/Web/Reference/Events/click"><code>'click'</code></a>, когда пользователь нажимает кнопку мыши, пока ее указатель находится поверх узла DOM на HTML-странице.</li> +</ul> + + + +<h2 id="Иерархия_объекта_событий">Иерархия объекта событий</h2> + +<p>Web-браузер определяет множество событий различного вида. Каждое описание включает, как структуру данных, передающуюся в обработчика, объект, который наследуется от объекта <code>EventPrototype</code>.</p> + +<p>Частичная диаграма иерархии класса объекта событий:</p> + +<div class="note"> +<p><strong>Заметка:</strong> Эта диаграма неполная.</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6633/Js_Event_Object_Hierarchy.svg" style="height: 496px; width: 1417px;"></p> + +<p>Web API Документация содержит <a href="/en-US/docs/Web/API/Event">страницу, описывающую объект событий</a>, который так же включает известные события DOM, подклассы объекта <code>Event</code>.</p> + +<h2 id="Документации">Документации</h2> + +<p>Три ресурса на MDN (Mozilla Developer Network) частично полезные для программистов, желащих работать с событиями:</p> + +<ul> + <li><a href="/en-US/docs/Web/Guide/API/DOM/Events">Гайд по событиям</a>, который является частью <a href="/en-US/docs/Web/Guide">Web Developers' Guide</a>,</li> + <li><a href="/en-US/docs/Web/Reference/Events">Event Reference</a>,</li> + <li>Web API Документация по объекту <a href="/en-US/docs/Web/API/Event"><code>Event</code></a>.</li> +</ul> |