diff options
| author | MDN <actions@users.noreply.github.com> | 2021-04-21 00:11:44 +0000 |
|---|---|---|
| committer | MDN <actions@users.noreply.github.com> | 2021-04-21 00:11:44 +0000 |
| commit | de630426a538c1f77d7c59e66827cb75693ed95b (patch) | |
| tree | ff14c2d2677ed2137a84d3c322fa2f62e206e63a /files/ru/orphaned/web/api | |
| parent | d7a27823444dc11c7ff40ca63a78b3b37ab82837 (diff) | |
| download | translated-content-de630426a538c1f77d7c59e66827cb75693ed95b.tar.gz translated-content-de630426a538c1f77d7c59e66827cb75693ed95b.tar.bz2 translated-content-de630426a538c1f77d7c59e66827cb75693ed95b.zip | |
[CRON] sync translated content
Diffstat (limited to 'files/ru/orphaned/web/api')
| -rw-r--r-- | files/ru/orphaned/web/api/document_object_model/events/index.html | 81 |
1 files changed, 81 insertions, 0 deletions
diff --git a/files/ru/orphaned/web/api/document_object_model/events/index.html b/files/ru/orphaned/web/api/document_object_model/events/index.html new file mode 100644 index 0000000000..3bdc87fe96 --- /dev/null +++ b/files/ru/orphaned/web/api/document_object_model/events/index.html @@ -0,0 +1,81 @@ +--- +title: Events and the DOM +slug: orphaned/Web/API/Document_Object_Model/Events +translation_of: Web/API/Document_Object_Model/Events +original_slug: Web/API/Document_Object_Model/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"><button onclick = "alert ('Hello world!')"> +</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">События и DOM</a></li> + <li><a href="/ru/docs/Web/API/Document_Object_Model/Examples">Примеры</a></li> +</ul> |
