diff options
Diffstat (limited to 'files/ru/orphaned/web/guide/events')
5 files changed, 0 insertions, 721 deletions
diff --git a/files/ru/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/ru/orphaned/web/guide/events/creating_and_triggering_events/index.html deleted file mode 100644 index 8744c80e01..0000000000 --- a/files/ru/orphaned/web/guide/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Создание и вызов событий -slug: orphaned/Web/Guide/Events/Creating_and_triggering_events -tags: - - DOM - - JavaScript - - events - - события -translation_of: Web/Guide/Events/Creating_and_triggering_events -original_slug: Web/Guide/Events/Creating_and_triggering_events ---- -<p>Эта статья демонстрирует, как создавать и вызывать пользовательские DOM-события. Такие события часто называют <strong>искусственными</strong> событиями, по отношению к событиям, производимым браузером.</p> - -<h2 id="Создание_собственных_событий">Создание собственных событий</h2> - -<p>События могут быть созданы с помощью конструктора <code><a href="/ru/docs/Web/API/Event">Event</a></code>:</p> - -<pre class="brush: js">var event = new Event('build'); - -// Подписываемся на событие -elem.addEventListener('build', function (e) { ... }, false); - -// Вызываем событие -elem.dispatchEvent(event);</pre> - -<p>Этот конструктор поддерживается во всех современных браузерах (кроме Internet Explorer). Более подробную информацию смотрите ниже <a href="#The_old-fashioned_way">"Старомодный способ"</a>.</p> - -<h3 id="Добавление_пользовательских_данных_–_CustomEvent()">Добавление пользовательских данных – CustomEvent()</h3> - -<p>Чтобы добавить больше данных к объекту event, существует интерфейс <a href="/ru/docs/Web/API/CustomEvent">CustomEvent</a>, и вы можете использовать свойство <u><strong>detail</strong></u>, чтобы передать собственные данные. Например, событие может быть создано так:</p> - -<pre class="brush: js">var event = new CustomEvent('build', { 'detail': elem.dataset.time });</pre> - -<p>Это позволит вам получить доступ к дополнительным данным в обработчике:</p> - -<pre class="brush: js">function eventHandler(e) { - log('The time is: ' + e.detail); -} -</pre> - -<h3 id="Старомодный_способ"><a id="The_old-fashioned_way" name="The_old-fashioned_way">Старомодный способ</a></h3> - -<p>Старый способ создать событие использует API в стиле Java. Пример:</p> - -<pre class="brush: js">// Создание события -var event = document.createEvent('Event'); - -// Назначить имя событию -event.initEvent('build', true, true); - -// Слушаем событие -document.addEventListener('build', function (e) { - // e.target соответствует объекту document -}, false); - -// target события может быть любой элемент -document.dispatchEvent(event); - -</pre> - -<h2 id="Вызов_встроенных_событий">Вызов встроенных событий</h2> - -<p>Этот пример показывает симуляцию клика (программно сгенерированное событие клика) по галочке чекбокса, используя DOM-методы. <a class="external" href="/samples/domref/dispatchEvent.html">Просмотр действующих примеров.</a></p> - -<pre class="brush: js">function simulateClick() { - var event = new MouseEvent('click', { - 'view': window, - 'bubbles': true, - 'cancelable': true - }); - var cb = document.getElementById('checkbox'); - var canceled = !cb.dispatchEvent(event); - if (canceled) { - // A handler called preventDefault. - alert("canceled"); - } else { - // None of the handlers called preventDefault. - alert("not canceled"); - } -}</pre> - -<h2 id="Browser_compatibility" name="Browser_compatibility" style="line-height: 30px; font-size: 2.14285714285714rem;">Совместимость с браузерами</h2> - -<p>{{Compat("api.Event.Event")}}</p> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li>{{domxref("document.createEvent()")}}</li> - <li>{{domxref("Event.initEvent()")}}</li> - <li>{{domxref("EventTarget.dispatchEvent()")}}</li> - <li>{{domxref("EventTarget.addEventListener()")}}</li> -</ul> diff --git a/files/ru/orphaned/web/guide/events/event_handlers/index.html b/files/ru/orphaned/web/guide/events/event_handlers/index.html deleted file mode 100644 index c30df7b474..0000000000 --- a/files/ru/orphaned/web/guide/events/event_handlers/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: DOM onevent handlers -slug: orphaned/Web/Guide/Events/Event_handlers -translation_of: Web/Guide/Events/Event_handlers -original_slug: Web/Guide/Events/Event_handlers ---- -<p>Веб-платформа предоставляет несколько способов получения уведомлений о событиях DOM. Два общих подхода - это {{domxref ("EventTarget.addEventListener", " addEventListener ()")}} и конкретные обработчики <span class="seoSummary"><code>on<em>event</em></code> </span> . Эта страница посвящена тому, как работают последние.</p> - -<h2 id="Регистрация_обработчиков_onevent">Регистрация обработчиков onevent</h2> - -<p>Обработчики <strong><code>on<em>event</em></code></strong> - это свойства определённых элементов DOM, позволяющие управлять тем, как этот элемент реагирует на события. Элементы могут быть интерактивными (ссылки, кнопки, изображения, формы и т. д.) или неинтерактивными (например, элемент base <body>). События - это такие действия, как:</p> - -<ul> - <li>Клик мышкой</li> - <li>Нажатие клавиш</li> - <li>Получение фокуса</li> -</ul> - -<p>Обработчик on-event обычно называется с именем события, на которое он реагирует, например <code>on<em>click</em></code> , <code>on<em>keypress</em></code> , <code>on<em>focus</em></code> и т. д.</p> - -<p>Вы можете указать обработчик событий on<...> для конкретного события (например, {{event("click")}}) для данного объекта различными способами:</p> - -<ul> - <li>Добавление HTML элемента {{Glossary("attribute")}} с событием <code>on<em><eventtype></em></code>:<br> - <code><button <strong>onclick="handleClick()"</strong>></code>,</li> - <li>Или установив соответствующий параметр {{Glossary("property/JavaScript", "property")}} из JavaScript:<br> - <code>document.querySelector("button")<strong>.onclick = function(event) { … }</strong></code>.</li> -</ul> - -<p>Свойство обработчика событий <code>on<em>event</em></code> служит своего рода заполнителем, которому может быть назначен один обработчик событий. Чтобы разрешить установку нескольких обработчиков для одного и того же события на данном объекте, вы можете вызвать метод {{domxref("EventTarget.addEventListener", " addEventListener ()")}} , который управляет списком обработчиков для данного события на объекте. Затем обработчик можно удалить из объекта, вызвав его функцию {{domxref ("EventTarget.removeEventListener", "removeEventListener()")}} .</p> - -<p>Когда происходит событие, которое применяется к элементу, каждый из его обработчиков событий вызывается, чтобы позволить им обрабатывать это событие один за другим. Вам не нужно вызывать их самостоятельно, хотя вы можете сделать это во многих случаях, чтобы легко имитировать происходящее событие. Например, учитывая объект кнопки <code>myButton</code> , вы можете сделать <code>myButton.onclick(myEventObject)</code> для прямого вызова обработчика событий. Если обработчик событий не имеет доступа к каким-либо данным из объекта event, вы можете пропустить это событие при вызове функции <code>onclick()</code> .</p> - -<p>This continues until every handler has been called, unless one of the event handlers explicitly halts the processing of the event by calling {{domxref("Event.stopPropagation", "stopPropagation()")}} on the event object itself.</p> - -<p>Это продолжается до тех пор, пока не будет вызван каждый обработчик, если только один из обработчиков событий явно не остановит обработку события, вызвав {{domxref("Event.stopPropagation", " stopPropagation ()")}} на самом объекте события.</p> - -<h3 id="Non-element_objects">Non-element objects</h3> - -<p>Event handlers can also be set with properties on non-element objects that generate events, like {{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("XMLHttpRequest") }}, and others. For example, for the <code>progress</code> event on instances of <code>XMLHttpRequest</code>:</p> - -<pre class="brush: js">const xhr = new XMLHttpRequest(); -xhr.onprogress = function() { … };</pre> - -<h2 id="HTML_onevent_attributes">HTML onevent attributes</h2> - -<p>HTML elements have attributes named <code>on<em>event</em></code> which can be used to register a handler for an event directly within the HTML code. When the element is built from the HTML, the value of its <code>on<em>event</em></code> attributes are copied to the DOM object that represents the element, so that accessing the attributes' values using JavaScript will get the value set in the HTML.</p> - -<p>Further changes to the HTML attribute value can be done via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute"><code>setAttribute</code> </a>method; Making changes to the JavaScript property will have no effect.</p> - -<h3 id="HTML">HTML</h3> - -<p>Given this HTML document:</p> - -<pre class="brush: html"><p>Demonstrating quirks of <code>on<em>event</em></code> HTML attributes on - <a onclick="log('Click!')">these three words</a>. -</p> - -<div></div></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<p>Then this JavaScript demonstrates that the value of the HTML attribute is unaffected by changes to the JavaScript object's property.</p> - -<pre class="brush: js">let logElement = document.querySelector('div'); -let el = document.querySelector("a"); - -function log(msg) { logElement.innerHTML += `${msg}<br>` }; -function anchorOnClick(event) { log("Changed onclick handler") }; - -// Original Handler -log(`Element's onclick as a JavaScript property: <code> ${el.onclick.toString()} </code>`); - -//Changing handler using .onclick -log('<br>Changing onclick handler using <strong> onclick property </strong> '); - -el.onclick = anchorOnClick; - -log(`Changed the property to: <code> ${el.onclick.toString()} </code>`); -log(`But the HTML attribute is unchanged: <code> ${el.getAttribute("onclick")} </code><br>`); - -//Changing handler using .setAttribute -log('<hr/><br> Changing onclick handler using <strong> setAttribute method </strong> '); -el.setAttribute("onclick", 'anchorOnClick(event)'); - -log(`Changed the property to: <code> ${el.onclick.toString()} </code>`); -log(`Now even the HTML attribute has changed: <code> ${el.getAttribute("onclick")} </code><br>`);</pre> - -<h3 id="Result">Result</h3> - -<p>{{ EmbedLiveSample('HTML_onevent_attributes', '', '', '', 'Web/Guide/Events/Event_handlers') }}</p> - -<p>For historical reasons, some attributes/properties on the {{HTMLElement("body")}} and {{HTMLElement("frameset")}} elements instead set event handlers on their parent {{domxref("Window")}} object. (The HTML specification names these: <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onblur">onblur</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onerror">onerror</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onfocus">onfocus</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code>, and <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onscroll">onscroll</a></code>.)</p> - -<h3 id="Event_handlers_parameters_this_binding_and_the_return_value">Event handler's parameters, <code>this</code> binding, and the return value</h3> - -<p>When the event handler is specified as <strong>an HTML attribute</strong>, the specified code is wrapped into a function with <strong>the following parameters</strong>:</p> - -<ul> - <li><code>event</code> — for all event handlers except {{domxref("GlobalEventHandlers.onerror", "onerror")}}.</li> - <li><code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, and <code>error</code> for the {{domxref("GlobalEventHandlers.onerror", "onerror")}} event handler. Note that the <code>event</code> parameter actually contains the error message as a string.</li> -</ul> - -<p>When the event handler is invoked, the <code>this</code> keyword inside the handler is set to the DOM element on which the handler is registered. For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#In_an_inline_event_handler">the <code>this</code> keyword documentation</a>.</p> - -<p>The return value from the handler determines if the event is canceled. The specific handling of the return value depends on the kind of event; for details, see <a href="https://html.spec.whatwg.org/multipage/webappapis.html#the-event-handler-processing-algorithm">"The event handler processing algorithm" in the HTML specification</a>.</p> - -<h3 id="When_the_event_handler_is_invoked">When the event handler is invoked</h3> - -<div class="blockIndicator note"> -<p>TBD (non-capturing listener)</p> -</div> - -<h3 id="Terminology">Terminology</h3> - -<p>The term <strong>event handler</strong> may refer to:</p> - -<ul> - <li>Any function or object that is registered to be notified of events</li> - <li>Or more specifically, to the mechanism of registering event listeners via <code>on…</code> attributes in HTML or properties in Web APIs, such as <code><button onclick="alert(this)"></code> or <code>window.onload = function() { … }</code>.</li> -</ul> - -<p>When discussing the various methods of listening to events:</p> - -<ul> - <li><strong>Event listener</strong> refers to a function or object registered via {{domxref("EventTarget.addEventListener()")}}</li> - <li><strong>Event handler</strong> refers to a function registered via <code>on…</code> attributes or properties</li> -</ul> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> - -<h4 id="Detecting_the_presence_of_event_handler_properties">Detecting the presence of event handler properties</h4> - -<p>You can detect the presence of an event handler property with the JavaScript <a href="/en-US/JavaScript/Reference/Operators/in" title="en/JavaScript/Reference/Operators/in"><code>in</code></a> operator. For example:</p> - -<pre class="brush: js">if ("onsomenewfeature" in window) { - /* do something amazing */ -} -</pre> - -<h4 id="Event_handlers_and_prototypes">Event handlers and prototypes</h4> - -<p>You can't set or access the values of any IDL-defined attributes on DOM prototype objects. That means you can't, for example, change <code>Window.prototype.onload</code>. In the past, event handlers (<code>onload</code>, etc.) weren't implemented as IDL attributes in Gecko, so you were able to do this for those. Now you can't. This improves compatibility.</p> diff --git a/files/ru/orphaned/web/guide/events/index.html b/files/ru/orphaned/web/guide/events/index.html deleted file mode 100644 index 955e0d2d21..0000000000 --- a/files/ru/orphaned/web/guide/events/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Руководство разработчика событий -slug: orphaned/Web/Guide/Events -tags: - - DOM - - Event - - Guide - - NeedsTranslation - - NeedsUpdate - - TopicStub -translation_of: Web/Guide/Events -original_slug: Web/Guide/Events ---- -<p>{{draft()}}</p> - -<p>События связаны с:</p> - -<ul> - <li>Шаблонами проектирования, использующимися для асинхронной обработки инцидентов, возникающих в жизненном цикле веб страницы</li> - <li>Именованием, характеризацией и использованием большого количества инцидентов различного типа</li> -</ul> - -<p>Статья <a href="/en-US/docs/Web/Guide/API/DOM/Events/Overview_of_Events_and_Handlers">Overview page</a> содержит в краткой манере описание шаблонов проектирования и типов определяемых современными браузерами инцидентов</p> - -<div></div> - -<p><a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">Custom events page</a> <span id="result_box" lang="ru"><span class="hps">описывает, как</span> <span class="hps">шаблон кода события</span> <span class="hps">может быть использован в</span> <span class="hps">пользовательском коде</span><span>, чтобы</span> <span class="hps">определить новые</span> <span class="hps">типы событий</span><span>, испускаемые от</span> <span class="hps">пользовательских объектов</span><span>, зарегистрируйтесь</span> <span class="hps">функции</span> <span class="hps">слушателя</span>для <span class="hps">обработки</span> <span class="hps">этих</span> <span class="hps">событий</span><span>,</span> <span class="hps">и вызова</span> <span class="hps">события</span> <span class="hps">в коде</span> <span class="hps">пользователя</span><span>.</span></span></p> - -<p><span id="result_box" lang="ru"><span class="hps">Остальные</span> <span class="hps">страницы описывают</span><span>, как использовать</span> <span class="hps">события разных</span> <span class="hps">видов</span><span>, определённых</span> <span class="hps">в веб-браузерах</span><span>.</span> <span class="hps">К сожалению,</span> <span class="hps">эти события</span> <span class="hps">были определены</span> <span class="hps">по частям</span><span>,</span> <span class="atn hps">веб-</span><span>браузеры</span> <span class="hps">развивались</span> <span class="hps">таким образом, что</span> <span class="hps">нет</span> <span class="hps">удовлетворения</span> <span class="hps">систематическим</span> <span class="hps">характеристикам</span> <span class="hps">событий</span> <span class="hps">встроенным</span> <span class="hps">или</span> <span class="hps">определённым</span> в <span class="atn hps">современных веб-</span><span>браузерах.</span></span></p> - -<p><span id="result_box" lang="ru"><span><strong>Устройство</strong>, на котором</span> <span class="atn hps">работа веб-</span><span>браузера</span> <span class="hps">может спровоцировать</span> <span class="hps">событие</span><span>, например</span> <span class="hps">связанное с</span> <span class="hps">изменением его</span> <span class="hps">положения и ориентации</span> <span class="hps">в реальном мире</span><span>,</span> <span class="hps">частично описано</span></span> <a href="/en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">page on orientation coordinate systems</a> и <a href="/en-US/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">page on the use of 3D transforms</a>. Они<span id="result_box" lang="ru"> <span class="hps">разные, но</span> <span class="hps">похожи</span><span>,</span> <span class="hps">с изменённой</span> <span class="hps">вертикальной ориентации</span> <span class="hps">устройства</span><span>.</span></span></p> - -<p><span id="result_box" lang="ru"><strong><span>Окно в котором</span> <span class="hps">отображается</span> <span class="hps">браузер</span></strong> <span class="hps">может вызвать</span> <span class="hps">события</span><span>, к примеру</span><span>,</span> <span class="hps">изменить размер</span><span>, если пользователь</span> <span class="hps">максимизирует</span> <span class="hps">окно или</span> <span class="hps">изменит его размер</span><span>.</span></span></p> - -<p><span id="result_box" lang="ru"><strong><span>Процесс загрузки</span></strong> <span class="hps">веб-страницы</span> <span class="hps">может вызвать</span> <span class="hps">ответное событие</span><span class="hps"> на завершение</span> <span class="hps">различных</span> <span class="hps">этапо</span><span class="hps">в</span> <span class="hps">загрузки,</span> анализирования <span class="hps">и перевода</span> <span class="hps">веб-страниц</span> <span class="hps">отображаемых пользователю</span><span>.</span></span></p> - -<p><span id="result_box" lang="ru"><span><strong>Взаимодействие пользователя</strong> с</span> <span class="hps">содержимым</span> <span class="hps">веб-страницы</span> <span class="hps">может вызвать</span> <span class="hps">события</span><span>.</span> <span class="hps">События</span><span>, вызванные</span> <span class="hps">взаимодействием</span> <span class="hps">пользователя</span> <span class="hps">развивались</span> <span class="hps">в первые годы</span> проектирования <span class="hps">браузера</span>, <span class="hps">и включают в себя</span> <span class="hps">сложную систему</span><span>, определяющую</span> <span class="hps">последовательность, в которой</span> <span class="hps">будет вызываться</span> <span class="hps">событие</span> <span class="hps">и</span> <span class="hps">манера, в которой</span> <span class="hps">эта последовательность</span> <span class="hps">может</span> <span class="hps">быть</span> <span class="hps">контролируемой</span><span>.</span> <span class="hps">Различные типы</span> <span class="hps">взаимодействия пользователя с</span> <span class="hps">управляемыми</span> <span class="hps">событиями:</span></span></p> - -<ul> - <li>обычное событие при нажатии,</li> - <li>событие, активированное мышью,</li> - <li><a href="/en-US/docs/Web/Guide/API/DOM/Events/Mouse_gesture_events">событие жеста мышью</a>,</li> - <li><a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">события нажатия на экран</a> и устаревшие <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)">экспериментальные события нажатия на экран (от Mozilla)</a>.</li> -</ul> - -<p><span id="result_box" lang="ru"><strong><span>Модификация</span> <span class="hps">в структуре веб-страницы</span> <span class="hps">или содержании</span></strong> <span class="hps">может быть</span> <span class="hps">вызвано некоторым</span> <span class="hps">событием</span><span>, </span> <span class="hps">описанным в</span></span> <a href="/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events">mutation events page</a><span id="result_box" lang="ru"><span class="hps">, но</span> их<span class="hps"> использование </span> <span class="hps">устарело в</span> <span class="hps">пользу более </span><span class="hps">лёгкого</span></span> <a href="/en-US/docs/Web/API/MutationObserver">Mutation Observer</a> подхода.</p> - -<p><span id="result_box" lang="ru"><strong><span class="hps">Потоки</span> <span class="hps">Медиа</span></strong>, <span class="hps">встроенный</span> <span class="hps">в</span> <span class="hps">HTML</span> <span class="hps">документа,</span> <span class="hps">может</span> <span class="hps">вызвать некоторые</span> <span class="hps">события</span><span>,</span> <span class="hps">страница описания</span></span> <a href="/en-US/docs/Web/Guide/API/DOM/Events/Media_events">media events</a>.</p> - -<p><span id="result_box" lang="ru"><strong><span class="hps">Сетевые</span> </strong><span class="hps"><strong>запросы</strong>, сделанные</span> <span class="atn hps">веб-</span><span>страницей, могут</span> <span class="hps">вызвать некоторые</span> <span class="hps">события</span><span>.</span></span></p> - -<p><span id="result_box" lang="ru"><span class="hps">Есть</span> <span class="hps">много других источников</span> <span class="hps">событий, определённых</span> <span class="hps">в веб-браузере</span><span>,</span> <span class="hps">страницы которых</span> <span class="hps">пока не доступны</span> <span class="hps">в данном руководстве</span><span>.</span></span></p> - -<div class="note"> -<p><span id="result_box" lang="ru"><span class="hps">Примечание</span><span>:</span> <span class="hps">Это руководство</span> <span class="hps">событие</span> <span class="hps">Разработчик</span>а <span class="hps">нуждается в существенной</span> <span class="hps">работе</span><span>.</span><span>Структура должна</span> <span class="hps">быть</span> <span class="hps">реорганизована</span> <span class="hps">и страницы</span> <span class="hps">переписаны.</span> <span class="hps">Мы надеемся, что</span> <span class="hps">все, что вы</span><span class="hps"> знаете и должны знать</span> <span class="hps">о событиях</span> <span class="hps">будет опубликовано</span> <span class="hps">здесь.</span></span></p> -</div> - -<h2 id="Docs">Docs</h2> - -<p>{{LandingPageListSubpages}}</p> diff --git a/files/ru/orphaned/web/guide/events/media_events/index.html b/files/ru/orphaned/web/guide/events/media_events/index.html deleted file mode 100644 index 44116bc573..0000000000 --- a/files/ru/orphaned/web/guide/events/media_events/index.html +++ /dev/null @@ -1,270 +0,0 @@ ---- -title: События в медиа (audio, video) объектах -slug: orphaned/Web/Guide/Events/Media_events -tags: - - Видео - - Медиа - - аудио - - события -translation_of: Web/Guide/Events/Media_events -original_slug: Web/Guide/Events/Media_events ---- -<p>Встроенные с помощью HTML тегов {{ HTMLElement("audio") }} или {{ HTMLElement("video") }} медиа объекты генерируют различные события. В этом разделе приведён их список и описание.</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>Название события</th> - <th>Описание</th> - </tr> - <tr> - <td><code>abort</code></td> - <td>Отправляется, когда воспроизведение прерывается; Например, если воспроизведение медиа прерывается и начинается с самого начала, это событие будет отправлено.</td> - </tr> - <tr> - <td><code>{{event("canplay")}}</code></td> - <td>Отправляется, когда доступно достаточно данных для того, что бы медиа могло воспроизвестись, по крайней мере, в течение нескольких кадров. Соответствует состоянию (readyState) HAVE_ENOUGH_DATA.</td> - </tr> - <tr> - <td><code>{{event("canplaythrough")}}</code></td> - <td>Отправляется, когда состояние готовности изменяется к CAN_PLAY_THROUGH. Указывает, что медиа может быть полностью воспроизведено без перерыва, предполагая, что скорость загрузки остаётся, по крайней мере на нынешнем уровне. Примечание: Ручная установка CURRENTTIME вызовет событие canplaythrough в Firefox. В других браузерах это может не произойти.</td> - </tr> - <tr> - <td><code>{{event("durationchange")}}</code></td> - <td>Метаданные были загружены или изменены, что указывает на изменение в продолжительности медиа. Может быть отправлено, например, когда медиа загружено достаточно для того, чтобы продолжительность уже была известна.</td> - </tr> - <tr> - <td><code>{{event("emptied")}}</code></td> - <td>Медиа стало пустым. Например, это событие отправляется, если медиа уже загружено (или частично загружено), и метод <a class="internal" href="/En/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="en/nsIDOMHTMLMediaElement"><code>load()</code></a> был вызван что бы его перезагрузить.</td> - </tr> - <tr> - <td>encrypted <span style="line-height: 1.5;">{{experimental_inline}}</span></td> - <td>The user agent has encountered initialization data in the media data.</td> - </tr> - <tr> - <td><code>ended</code></td> - <td>Отправляется, когда воспроизведение завершено.</td> - </tr> - <tr> - <td><code>error</code></td> - <td>Отправляется, когда произошла ошибка. Атрибут <code>error</code> медиа объекта содержит более подробную информацию об ошибке. Смотрите <a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Error_handling">Error handling</a>, что бы узнать подробнее.</td> - </tr> - <tr> - <td><code>interruptbegin</code></td> - <td>Отправляется, когда воспроизведение на Firefox OS устройстве прервано по любой из причин - например, если приложение ушло в фон или аудио с большим приоритетом начало воспроизведение. См. <a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a>.</td> - </tr> - <tr> - <td><code>interruptend</code></td> - <td>Отправляется, когда ранее прерванное воспроизведение на Firefox OS устройстве продолжает воспроизведение. См. <a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a></td> - </tr> - <tr> - <td><code>{{event("loadeddata")}}</code></td> - <td>Завершена загрузка первого кадра (frame) медиа.</td> - </tr> - <tr> - <td><code>{{event("loadedmetadata")}}</code></td> - <td>Метаданные медиа были загружены; все атрибуты теперь содержат максимум информации.</td> - </tr> - <tr> - <td><code>{{event("loadstart")}}</code></td> - <td>Отправляется, когда начинается загрузка медиа.</td> - </tr> - <tr> - <td><code>mozaudioavailable</code></td> - <td>Sent when an audio buffer is provided to the audio layer for processing; the buffer contains raw audio samples that may or may not already have been played by the time you receive the event.</td> - </tr> - <tr> - <td><code>{{event("pause")}}</code></td> - <td>Отправляется, когда воспроизведение приостановлено.</td> - </tr> - <tr> - <td><code>{{event("play")}}</code></td> - <td>Отправляется, когда воспроизведение медиа начинается после того, как было приостановлено; то есть, когда воспроизведение возобновляется после паузы.</td> - </tr> - <tr> - <td><code>{{event("playing")}}</code></td> - <td>Отправляется, когда начинается воспроизведение медиа (в первый раз, после паузы или после перезапуска).</td> - </tr> - <tr> - <td><code>{{event("progress")}}</code></td> - <td>Отправляется периодически для информирования о прогрессе скачивания медиа файла. Информация об объёме загруженных данных доступна в атрибуте "buffered" элемента медиа.</td> - </tr> - <tr> - <td><code>{{event("ratechange")}}</code></td> - <td>Отправляется, когда изменяется скорость воспроизведения.</td> - </tr> - <tr> - <td><code>{{event("seeked")}}</code></td> - <td>Отправляется, когда операция поиска завершена.</td> - </tr> - <tr> - <td><code>{{event("seeking")}}</code></td> - <td>Отправляется, когда начинается операция поиска.</td> - </tr> - <tr> - <td><code>{{event("stalled")}}</code></td> - <td>Sent when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td> - </tr> - <tr> - <td><code>{{event("suspend")}}</code></td> - <td>Отправляется, когда загрузка медиа приостановлена. Это может произойти как потому, что загрузка была завершена, так и по другим причинам.</td> - </tr> - <tr> - <td><code>{{event("timeupdate")}}</code></td> - <td>Отправляется, когда изменяется значение атрибута <code>currentTime.</code></td> - </tr> - <tr> - <td><code>{{event("volumechange")}}</code></td> - <td>Отправляется, когда изменяется громкость звука (также когда звук включён или выключен).</td> - </tr> - <tr> - <td><code>{{event("waiting")}}</code></td> - <td>Отправляется, когда операция (напр. воспроизведение) была отложена до завершение другой операции (напр. поиск).</td> - </tr> - </tbody> -</table> - -<p>Вы можете легко следить за этими событиями, используя следующий код:</p> - -<pre class="brush: js">var v = document.getElementsByTagName("video")[0]; -v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true); -v.currentTime = 10.0; -</pre> - -<p>В этом примере первый элемент получает видео и вешает на него событие "seeked". Обработчик вызывает метод элемента play(), который начинает воспроизведение.</p> - -<p>Затем, в строке 3 примера, устанавливается атрибут currentTime элемента в значение 10.0, что инициирует переход к десятой секунде видео. Это приводит к отправлению события "seeking" после начала операции, и события "seeked" после её завершения.</p> - -<p>Другими словами, этот пример пытается перейти к 10-секундной видео, после чего начинает воспроизведение.</p> - -<h2 id="Совместимость">Совместимость</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatGeckoDesktop("1.9.1") }} (Prior to Gecko 2.0, media events bubbled.)</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>encrypted</td> - <td> - <p class="p1">{{CompatChrome(42.0)}}</p> - </td> - <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td> - <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td> - <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td> - <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td> - </tr> - <tr> - <td>load</td> - <td>{{ CompatUnknown() }}</td> - <td>Removed in {{ CompatGeckoDesktop("1.9.2") }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>mozaudioavailable {{ non-standard_inline() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatGeckoDesktop("2.0") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td>suspend</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatGeckoDesktop("1.9.2") }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td> - </tr> - <tr> - <td>encrypted</td> - <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatNo }}</span></td> - <td>{{CompatChrome(43.0)}}</td> - <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td> - <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td> - <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td> - <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td> - <td> - <p class="p1">{{CompatChrome(42.0)}}</p> - </td> - </tr> - <tr> - <td>load</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td> - </tr> - <tr> - <td>mozaudioavailable {{ non-standard_inline() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatGeckoMobile("2.0") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td> - </tr> - <tr> - <td>suspend</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td> - </tr> - </tbody> -</table> -</div> - -<p> </p> diff --git a/files/ru/orphaned/web/guide/events/overview_of_events_and_handlers/index.html b/files/ru/orphaned/web/guide/events/overview_of_events_and_handlers/index.html deleted file mode 100644 index ea9b25b46d..0000000000 --- a/files/ru/orphaned/web/guide/events/overview_of_events_and_handlers/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: Обзор событий и обработчиков -slug: orphaned/Web/Guide/Events/Overview_of_Events_and_Handlers -translation_of: Web/Guide/Events/Overview_of_Events_and_Handlers -original_slug: 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> |