aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/api/document_object_model/events/index.html
diff options
context:
space:
mode:
authorFlorian Dieminger <me@fiji-flo.de>2021-02-11 18:27:57 +0100
committerGitHub <noreply@github.com>2021-02-11 18:27:57 +0100
commit38577fa9b17463b731d503d61bddd399dadea6ac (patch)
tree73b60b0d72190a8da1c1baa063d690f935fb5120 /files/ru/web/api/document_object_model/events/index.html
parent609ee7efcfe881caa08237948e1ed3252e60afa1 (diff)
parent786d51e5e35f25c06fc64083574a435e240b2a54 (diff)
downloadtranslated-content-38577fa9b17463b731d503d61bddd399dadea6ac.tar.gz
translated-content-38577fa9b17463b731d503d61bddd399dadea6ac.tar.bz2
translated-content-38577fa9b17463b731d503d61bddd399dadea6ac.zip
Merge pull request #42 from fiji-flo/unslugging-ru
Unslugging ru
Diffstat (limited to 'files/ru/web/api/document_object_model/events/index.html')
-rw-r--r--files/ru/web/api/document_object_model/events/index.html81
1 files changed, 81 insertions, 0 deletions
diff --git a/files/ru/web/api/document_object_model/events/index.html b/files/ru/web/api/document_object_model/events/index.html
new file mode 100644
index 0000000000..c5995b792e
--- /dev/null
+++ b/files/ru/web/api/document_object_model/events/index.html
@@ -0,0 +1,81 @@
+---
+title: Events and the DOM
+slug: Web/API/Document_Object_Model/Events
+translation_of: Web/API/Document_Object_Model/Events
+original_slug: DOM/DOM_Reference/Events
+---
+<p>Вступление</p>
+
+<h2 id="Вступление">Вступление</h2>
+
+<p>В этой главе описывается модель событий DOM. <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Топ скрыть</a> Интерфейс сам по себе описано, а также интерфейсы для регистрации событий на узлах в DOM, Также а <a href="/ru/docs/Web/API/EventTarget.addEventListener">слушатели события</a> Главного , Также а Несколько больше Примеры, которые показывают, как Различные интерфейсы связаны друг события Главного с другом.</p>
+
+<p>Существует отличная диаграмма, которая четко объясняет события трех этапов через DOM в проекте <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM Level 3 Events</a> .</p>
+
+<p>Также см. <a href="/ru/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">Пример 5: Распространение событий</a> в главе «Примеры» для более подробного примера.</p>
+
+<h2 id="Регистрация_слушателей_событий">Регистрация слушателей событий</h2>
+
+<p>Есть 3 способа регистрации обработанных событий для элемента DOM.</p>
+
+<h3 id="EventTarget.addEventListener"><a href="/ru/docs/Web/API/EventTarget.addEventListener"><code>EventTarget.addEventListener</code></a></h3>
+
+<pre class="brush: js">// Предполагая, что myButton является элементом кнопки
+myButton.addEventListener ('click', greet, false);
+function greet (event) {
+  // распечатать и посмотреть на объект события
+  // всегда печатать аргументы в случае пропуска любых других аргументов
+ console.log ('greet:', arguments);
+  оповещение («Привет, мир»);
+}
+</pre>
+
+<p>Это метод, который вы должны использовать на современных веб-страницах.</p>
+
+<p>Примечание. Internet Explorer 6-8 не поддерживает этот метод, предлагая аналогичный {{domxref ("EventTarget.attachEvent")}} API. Для кросс-браузерной совместимости используйте одну из множества доступных библиотек JavaScript.</p>
+
+<p>Дополнительную информацию можно найти на справочной странице {{domxref ("EventTarget.addEventListener")}}.</p>
+
+<h3 id="Атрибут_HTML"><a href="/ru/docs/Web/Guide/HTML/Event_attributes">Атрибут HTML</a></h3>
+
+<pre class="brush: html">&lt;button onclick = "alert ('Hello world!')"&gt;
+</pre>
+
+<p>Код JavaScript в атрибуте передается объекту Event через <code>event</code>параметр. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">Возвращаемое значение обрабатывается особым образом, описанным в спецификации HTML</a> .</p>
+
+<p>Этого пути следует избегать. Это делает разметку больше и менее читаемой. Проблемы содержания / структуры и поведения плохо разделены, что затрудняет поиск ошибки.</p>
+
+<h3 id="Свойства_элемента_DOM">Свойства элемента DOM</h3>
+
+<pre class="brush: js">// Предполагая, что myButton является элементом кнопки
+<code>myButton.onclick = function(event){alert('Hello world');};</code>
+</pre>
+
+<p>Функция может быть определена для получения <code>event</code>параметра. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">Возвращаемое значение обрабатывается особым образом, описанным в спецификации HTML</a> .</p>
+
+<p>Проблема этого метода в том, что для каждого элемента и для каждого события может быть установлен только один обработчик.</p>
+
+<h2 id="Доступ_к_интерфейсам_событий">Доступ к интерфейсам событий</h2>
+
+<p>Обработчики событий могут быть присоединены к различным объектам, включая элементы DOM, документ, <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects">объект окна</a> и т. Д. Когда происходит событие, объект события создается и последовательно передается слушателям события.</p>
+
+<p>Интерфейс {{domxref ("Event")}} доступен из функции-обработчика через объект события, переданный в качестве первого аргумента. В следующем простом примере показано, как объект события передается в функцию-обработчик события и может использоваться из одной такой функции.</p>
+
+<pre class="brush: js"><code>function print(evt) {</code>
+ // параметру evt автоматически назначается объект события
+  // позаботимся о различиях в console.log и alert
+  <code>console.log('print:', evt);
+ alert(evt);
+}</code>
+// любая функция должна иметь подходящее имя, это то, что называется семантическим
+<code>table_el.onclick = print; </code>
+</pre>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/Document_Object_Model">DOM Ссылка</a></li>
+ <li><a href="/ru/docs/Web/API/Document_Object_Model/Introduction">Введение в DOM</a></li>
+ <li><a href="/ru/docs/Web/API/Document_Object_Model/Events">События и ДОМ</a></li>
+ <li><a href="/ru/docs/Web/API/Document_Object_Model/Examples">Примеры</a></li>
+</ul>