diff options
Diffstat (limited to 'files/ru/web/api/eventtarget')
| -rw-r--r-- | files/ru/web/api/eventtarget/addeventlistener/index.html | 58 |
1 files changed, 29 insertions, 29 deletions
diff --git a/files/ru/web/api/eventtarget/addeventlistener/index.html b/files/ru/web/api/eventtarget/addeventlistener/index.html index 7d5f4d84ba..dfd29c7aa9 100644 --- a/files/ru/web/api/eventtarget/addeventlistener/index.html +++ b/files/ru/web/api/eventtarget/addeventlistener/index.html @@ -27,7 +27,7 @@ target</em>.addEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</ <dl> <dt><code>type</code></dt> - <dd>Чувствительная к регистру строка, представляющая <a href="/en-US/docs/DOM/event.type" title="DOM/Event.type">тип прослушиваемого события</a>.</dd> + <dd>Чувствительная к регистру строка, представляющая <a href="/en-US/docs/DOM/event.type" title="DOM/Event.type">тип обрабатываемого события</a>.</dd> <dt><code>listener</code></dt> <dd>Объект, который принимает уведомление, когда событие указанного типа произошло. Это должен быть объект, реализующий интерфейс {{domxref("EventListener")}} или просто <a href="/en-US/docs/JavaScript/Guide/Functions" title="JavaScript/Guide/Functions">функция JavaScript</a>.</dd> </dl> @@ -36,20 +36,20 @@ target</em>.addEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</ <dt><code>options</code> {{optional_inline}}</dt> <dd>Объект <code>options</code>, который определяет характеристики объекта, прослушивающего событие. Доступны следующие варианты: <ul> - <li><code>capture</code>: {{jsxref("Boolean")}} указывает, что события этого типа будут отправлены зарегистрированному слушателю <code>listener</code> перед отправкой на <code>EventTarget</code>, расположенный ниже в дереве DOM.</li> - <li><code>once</code>: {{jsxref("Boolean")}} указывает, что слушатель должен быть вызван не более одного раза после добавления. Если <code>true</code>, слушатель автоматически удаляется при вызове.</li> - <li><code>passive</code>: {{jsxref("Boolean")}} указывает, что слушатель никогда не вызовет <code>preventDefault()</code>. Если все же вызов будет произведен, браузер должен игнорировать его и генерировать консольное предупреждение. Пример {{anch("Улучшение производительности прокрутки с помощью passive true")}}</li> - <li>{{non-standard_inline}}<code> mozSystemGroup</code>: {{jsxref("Boolean")}} указывает, что слушатель должен быть добавлен в системную группу. Доступно только в коде, запущенном в XBL или в <a href="https://chrome.google.com/webstore/detail/open-with-firefox/poeacjbaiakjnaepdjgggojcjoajakmd">расширении Chrome</a>.</li> + <li><code>capture</code>: {{jsxref("Boolean")}} указывает, что события этого типа будут отправлены зарегистрированному обработчику <code>listener</code> перед отправкой на <code>EventTarget</code>, расположенный ниже в дереве DOM.</li> + <li><code>once</code>: {{jsxref("Boolean")}} указывает, что обработчик должен быть вызван не более одного раза после добавления. Если <code>true</code>, обработчик автоматически удаляется при вызове.</li> + <li><code>passive</code>: {{jsxref("Boolean")}} указывает, что обработчик никогда не вызовет <code>preventDefault()</code>. Если все же вызов будет произведен, браузер должен игнорировать его и генерировать консольное предупреждение. Пример {{anch("Улучшение производительности прокрутки с помощью passive true")}}</li> + <li>{{non-standard_inline}}<code> mozSystemGroup</code>: {{jsxref("Boolean")}} указывает, что обработчик должен быть добавлен в системную группу. Доступно только в коде, запущенном в XBL или в <a href="https://chrome.google.com/webstore/detail/open-with-firefox/poeacjbaiakjnaepdjgggojcjoajakmd">расширении Chrome</a>.</li> </ul> </dd> <dt><code>useCapture</code> {{optional_inline}}</dt> - <dd>Если равно <code>true</code>, <code>useCapture</code> указывает, что пользователь желает начать захват. После инициализации захвата все события указанного типа будут отправлены в зарегистрированный <code>listener</code> перед отправкой в какой-либо <code>EventTarget</code> под ним в дереве DOM. События, восходящие вверх по дереву, не будут вызывать слушателей, которым назначено использовать захват. Смотрите <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow" title="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events</a> для более детального объяснения. Значение <code>useCapture</code> по умолчанию равно <code>false</code>. - <div class="note"><strong>Note: </strong>Для прослушивателей событий прикреплённых к цели события, событие находиться в целевой фазе, а не в фазах захвата или всплытия. События в целевой фазе инициируют все прослушиватели на элементе в том порядке, в котором они были зарегистрированы независимо от параметра <code>useCapture</code>.</div> + <dd>Если равно <code>true</code>, <code>useCapture</code> указывает, что пользователь желает начать захват. После инициализации захвата все события указанного типа будут отправлены в зарегистрированный <code>listener</code> перед отправкой в какой-либо <code>EventTarget</code> под ним в дереве DOM. События, восходящие вверх по дереву, не будут вызывать обработчиков, которым назначено использовать захват. Смотрите <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow" title="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events</a> для более детального объяснения. Значение <code>useCapture</code> по умолчанию равно <code>false</code>. + <div class="note"><strong>Note: </strong>Для обработчиков событий прикреплённых к цели события, событие находиться в целевой фазе, а не в фазах захвата или всплытия. События в целевой фазе инициируют все обработчики на элементе в том порядке, в котором они были зарегистрированы независимо от параметра <code>useCapture</code>.</div> <div class="note"><strong>Note:</strong> <code>useCapture</code> не всегда был опциональным. Лучше указывать данный параметр для повышения совместимости.</div> </dd> <dt><code>wantsUntrusted</code> {{Non-standard_inline}}</dt> - <dd>Если равно <code>true</code>, слушатель будет получать сгенерированные события, посланные со страницы (по умолчанию равно <code>false</code> для chrome и <code>true</code> для обычных веб-страниц). Этот параметр доступен только в Gecko и в основном полезен для использования в дополнениях и самом браузере. Смотрите <a href="/ru/docs/Archive/Add-ons/Interaction_between_privileged_and_non-privileged_pages" title="Code snippets/Interaction between privileged and non-privileged pages">Взаимодействие между привилегированными и непривилегированными страницами</a> для примеров использования.</dd> + <dd>Если равно <code>true</code>, обработчик будет получать сгенерированные события, посланные со страницы (по умолчанию равно <code>false</code> для chrome и <code>true</code> для обычных веб-страниц). Этот параметр доступен только в Gecko и в основном полезен для использования в дополнениях и самом браузере. Смотрите <a href="/ru/docs/Archive/Add-ons/Interaction_between_privileged_and_non-privileged_pages" title="Code snippets/Interaction between privileged and non-privileged pages">Взаимодействие между привилегированными и непривилегированными страницами</a> для примеров использования.</dd> </dl> <p>Прежде чем использовать определенное значение в объекте <code>options</code>, рекомендуется убедиться, что браузер пользователя поддерживает его, поскольку это дополнение, которое не все браузеры поддерживали исторически.</p> @@ -60,9 +60,9 @@ target</em>.addEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</ <h2 id="Примечания_по_использованию">Примечания по использованию</h2> -<h3 id="Обратный_вызов_прослушивателя_событий">Обратный вызов прослушивателя событий</h3> +<h3 id="Обратный_вызов_обработчика_событий">Обратный вызов обработчика событий</h3> -<p>Прослушиватель событий может быть задан либо как функция обратного вызова, либо как объект реализующий {{domxref("EventListener")}}, чей {{domxref("EventListener.handleEvent", "handleEvent()")}} метод служит как функция обратного вызова.</p> +<p>Обработчик событий может быть задан либо как функция обратного вызова, либо как объект реализующий {{domxref("EventListener")}}, чей {{domxref("EventListener.handleEvent", "handleEvent()")}} метод служит как функция обратного вызова.</p> <p>Сама функция обратного вызова имеет те же параметры и возвращаемое значение что и метод <code>handleEvent()</code>; То есть обратный вызов принимает единственный параметр: объект основанный на {{domxref("Event")}} описывая событие, которое произошло и ничего не возвращая.</p> @@ -78,7 +78,7 @@ target</em>.addEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</ <h3 id="Безопасная_проверка_поддержки_option">Безопасная проверка поддержки <code>option</code></h3> -<p>В более старых версиях спецификации DOM третьим параметром <code>addEventListener</code> было логическое значение, указывающее, следует ли захватывать событие на этапе погружения. Со временем стало ясно, что необходимо больше вариантов. Вместо добавления дополнительных параметров в функцию (усложняя ситуацию при использовании необязательных значений) третий параметр был изменен на объект, который может содержать различные свойства, определяющие значения параметров для настройки слушателя событий.</p> +<p>В более старых версиях спецификации DOM третьим параметром <code>addEventListener</code> было логическое значение, указывающее, следует ли захватывать событие на этапе погружения. Со временем стало ясно, что необходимо больше вариантов. Вместо добавления дополнительных параметров в функцию (усложняя ситуацию при использовании необязательных значений) третий параметр был изменен на объект, который может содержать различные свойства, определяющие значения параметров для настройки обработчика событий.</p> <p>Поскольку старые браузеры (а также некоторые не слишком старые браузеры) по-прежнему предполагают, что третий параметр является логическим, возникает необходимость создания своего кода, чтобы разумно обрабатывать этот сценарий. Вы можете сделать это, используя функцию обнаружения для каждого из интересующих вас параметров.</p> @@ -100,12 +100,12 @@ try { <p>Для проверки поддержки использования какой-либо опции можно просто добавить геттер для нее, используя код, подобный тому, что показан выше.</p> -<p>Если вы хотите добавить прослушиватель событий, использующий параметры, о которых идет речь, вы можете сделать это подобным образом:</p> +<p>Если вы хотите добавить обработчик событий, использующий параметры, о которых идет речь, вы можете сделать это подобным образом:</p> <pre class="brush: js notranslate">someElement.addEventListener("mouseup", handleMouseUp, passiveSupported ? { passive: true } : false);</pre> -<p>Здесь мы добавляем слушателя для события {{event ("mouseup")}} элемента <code>someElement</code>. Для третьего параметра, если <code>passiveSupported</code> имеет значение <code>true</code>, мы указываем объект <code>options</code> с <code>passive: true</code>; в противном случае мы знаем, что нам нужно передать логическое значение, и мы передаем <code>false</code> как значение параметра <code>useCapture</code>.</p> +<p>Здесь мы добавляем обработчик события {{event ("mouseup")}} элемента <code>someElement</code>. Для третьего параметра, если <code>passiveSupported</code> имеет значение <code>true</code>, мы указываем объект <code>options</code> с <code>passive: true</code>; в противном случае мы знаем, что нам нужно передать логическое значение, и мы передаем <code>false</code> как значение параметра <code>useCapture</code>.</p> <p>Вы можете использовать стороннюю библиотеку, такую как <a href="https://modernizr.com/docs">Modernizr</a> или <a href="https://github.com/rafrex/detect-it">Detect It</a>, чтобы проверить поддержку необходимого свойства.</p> @@ -113,7 +113,7 @@ try { <h2 id="Примеры"><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 2.5rem;'>Примеры</span></h2> -<h3 id="addEventListenerBasic" name="addEventListenerBasic">Добавление простого слушателя</h3> +<h3 id="addEventListenerBasic" name="addEventListenerBasic">Добавление простого обработчика</h3> <p>Эти примеры демонстрируют как использовать <code>addEventListener()</code> для наблюдения за щелчками мышкой по элементу.</p> @@ -137,18 +137,18 @@ function modifyText() { } } -// Добавляет слушателя событий для таблицы +// Добавляет обработчика событий для таблицы var el = document.getElementById("outside"); el.addEventListener("click", modifyText, false); </pre> -<p>В примере выше, <code>modifyText()</code> регистрирует слушателя для события click, используя <code>addEventListener()</code>. Клик в любом месте таблицы будет поднимать обработчик и запускать <code>modifyText()</code>.</p> +<p>В примере выше, <code>modifyText()</code> регистрирует обработчика для события click, используя <code>addEventListener()</code>. Клик в любом месте таблицы будет поднимать обработчик и запускать <code>modifyText()</code>.</p> <h4 id="Результат">Результат</h4> <p>{{EmbedLiveSample('Add_a_simple_listener')}}</p> -<p>Если вам нужно передать параметры в слушателя, вы можете использовать анонимные функции.</p> +<p>Если вам нужно передать параметры в обработчик, вы можете использовать анонимные функции.</p> <h3 id="Event_Listener_with_anonymous_function" name="Event_Listener_with_anonymous_function">Слушатель события с анонимной функцией</h3> @@ -167,7 +167,7 @@ function modifyText(new_text) { t2.firstChild.nodeValue = new_text; } -// Функция, добавляющая слушатель к таблице +// Функция, добавляющая обработчик к таблице el = document.getElementById("outside"); el.addEventListener("click", function(){modifyText("четыре")}, false); </pre> @@ -219,13 +219,13 @@ el.addEventListener("click", () => { modifyText("four"); }, false);</pre> <p>Ниже описан другой, <a href="#Older_way_to_register_event_listeners">более старый способ регистрации обработчиков</a>.</p> -<h3 id="Adding_a_listener_during_event_dispatch" name="Adding_a_listener_during_event_dispatch">Добавление слушателя во время обработки события</h3> +<h3 id="Adding_a_listener_during_event_dispatch" name="Adding_a_listener_during_event_dispatch">Добавление обработчика во время обработки события</h3> <p>Если <code>EventListener</code> добавлен к <code>EventTarget</code> во время обработки события, он не будет вызван текущими действиями, но может быть вызван на более поздней стадии обработки события, при восходящей обработке.</p> -<h3 id="Multiple_identical_event_listeners" name="Multiple_identical_event_listeners">Несколько одинаковых слушателей события</h3> +<h3 id="Multiple_identical_event_listeners" name="Multiple_identical_event_listeners">Несколько одинаковых обработчиков события</h3> -<p>Если зарегистрировано несколько одинаковых <code>EventListener</code> на одном <code>EventTarget</code> с одинаковыми параметрами, дублирующиеся слушатели игнорируются. Так как одинаковые слушатели игнорируются, не требуется удалять их вручную с помощью метода <a href="/en-US/docs/DOM/EventTarget.removeEventListener" title="DOM/element.removeEventListener">removeEventListener</a>.</p> +<p>Если зарегистрировано несколько одинаковых <code>EventListener</code> на одном <code>EventTarget</code> с одинаковыми параметрами, дублирующиеся обработчики игнорируются. Так как одинаковые обработчики игнорируются, не требуется удалять их вручную с помощью метода <a href="/en-US/docs/DOM/EventTarget.removeEventListener" title="DOM/element.removeEventListener">removeEventListener</a>.</p> <h3 id="The_value_of_this_within_the_handler" name="The_value_of_this_within_the_handler">Значение <code>this</code> в обработчике</h3> @@ -239,7 +239,7 @@ el.addEventListener("click", () => { modifyText("four"); }, false);</pre> <p>Значение переменной <code>this</code> внутри <code>modifyText()</code> при вызове событием клика будет равно ссылке на глобальный (window) объект (или <code>undefined</code> при использовании <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>)</p> -<div class="note"><strong>Note:</strong> В JavaScript 1.8.5 введён метод <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="JavaScript/Reference/Global Objects/Function/bind">Function.prototype.bind()</a></code> , который позволяет указать значение, которое должно быть использовано для всех вызовов данной функции. Он позволяет вам легко обходить ситуации, в которых не ясно, чему будет равно this, в зависимости от того, в каком контексте будет вызвана ваша функция. заметьте, также, что Вам будет необходимо иметь внешнюю ссылку на слушатель, чтобы Вы могли удалить его позже.</div> +<div class="note"><strong>Note:</strong> В JavaScript 1.8.5 введён метод <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="JavaScript/Reference/Global Objects/Function/bind">Function.prototype.bind()</a></code> , который позволяет указать значение, которое должно быть использовано для всех вызовов данной функции. Он позволяет вам легко обходить ситуации, в которых не ясно, чему будет равно this, в зависимости от того, в каком контексте будет вызвана ваша функция. заметьте, также, что Вам будет необходимо иметь внешнюю ссылку на обработчик, чтобы Вы могли удалить его позже.</div> <p>Пример с использованием <code>bind</code> и без него:</p> @@ -256,7 +256,7 @@ el.addEventListener("click", () => { modifyText("four"); }, false);</pre> } </pre> -<p>Проблема в примере выше заключается в том, что Вы не можете удалить слушатель, вызванный с <code>bind</code>. Другое решение использует специальную функцию <code>handleEvent</code>, чтобы перехватывать любые события:</p> +<p>Проблема в примере выше заключается в том, что Вы не можете удалить обработчик, вызванный с <code>bind</code>. Другое решение использует специальную функцию <code>handleEvent</code>, чтобы перехватывать любые события:</p> <pre class="brush: js notranslate">var Something = function(element) { this.name = 'Something Good'; @@ -272,11 +272,11 @@ el.addEventListener("click", () => { modifyText("four"); }, false);</pre> } }; - // В этом случае слушатели хранятся в this, а не в this.handleEvent + // В этом случае обработчики хранятся в this, а не в this.handleEvent element.addEventListener('click', this, false); element.addEventListener('dblclick', this, false); - // Вы можете напрямую удалять слушатели + // Вы можете напрямую удалять обработчики element.removeEventListener('click', this, false); element.removeEventListener('dblclick', this, false); } @@ -378,7 +378,7 @@ el.addEventListener("click", () => { modifyText("four"); }, false);</pre> <h3 id="Older_way_to_register_event_listeners" name="Older_way_to_register_event_listeners">Старый способ регистрации обработчиков событий</h3> -<p><code>addEventListener()</code> был добавлен в спецификации DOM 2 <a href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a>. До этого слушатели добавлялись следующим образом:</p> +<p><code>addEventListener()</code> был добавлен в спецификации DOM 2 <a href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a>. До этого обработчики добавлялись следующим образом:</p> <pre class="brush: js notranslate">// Передача ссылки на функцию — не добавляйте '()' после него, это вызовет функцию! el.onclick = modifyText; @@ -391,7 +391,7 @@ element.onclick = function() { <p>Этот метод заменяет текущие слушатели события <code>click</code>, если они есть. Тоже самое для других событий и ассоциируемых с ними обработчиков, таких как <code>blur</code> (<code>onblur</code>), <code>keypress</code> (<code>onkeypress</code>), и так далее.</p> -<p>Так как это по существу было частью DOM 0, этот метод имеет широкую поддержку и не требует специального кросс-браузерного кода; следовательно, это обычно используется, чтобы добавлять слушатели динамически, если не требуются расширенные возможности <code>addEventListener()</code>.</p> +<p>Так как это по существу было частью DOM 0, этот метод имеет широкую поддержку и не требует специального кросс-браузерного кода; следовательно, это обычно используется, чтобы добавлять обработчики динамически, если не требуются расширенные возможности <code>addEventListener()</code>.</p> <h3 id="Memory_issues" name="Memory_issues">Вопросы памяти</h3> @@ -418,7 +418,7 @@ for(i=0 ; i<els.length ; i++){ <h3 id="Улучшение_производительности_прокрутки_с_помощью_passive_true">Улучшение производительности прокрутки с помощью <code>passive: true</code></h3> -<p>Значение по умолчанию для параметра <code>passive</code> - <code>false</code>. Начиная с Chrome 56 (desktop, Chrome for Android, Android webview) значение по умолчанию для {{event("touchstart")}} и {{event("touchmove")}} равно <code>true</code>, а вызовы <code>preventDefault()</code> не разрешены. Чтобы отменить это поведение, необходимо установить параметр <code>passive</code> в <code>false</code> (см. пример ниже). Это изменение не позволяет слушателю блокировать показ страницы во время прокрутки пользователя. Демонстрация доступна на <a href="https://developers.google.com/web/updates/2016/06/passive-event-listeners">сайте разработчиков Google</a>. Обратите внимание, что Edge вообще не поддерживает <code>options</code>, и добавление его без <a href="https://developer.mozilla.org/ru/docs/Web/API/EventTarget/addEventListener$edit#Safely_detecting_option_support">проверки поддержки</a> помешает использовать аргумент <code>useCapture</code>.</p> +<p>Значение по умолчанию для параметра <code>passive</code> - <code>false</code>. Начиная с Chrome 56 (desktop, Chrome for Android, Android webview) значение по умолчанию для {{event("touchstart")}} и {{event("touchmove")}} равно <code>true</code>, а вызовы <code>preventDefault()</code> не разрешены. Чтобы отменить это поведение, необходимо установить параметр <code>passive</code> в <code>false</code> (см. пример ниже). Это изменение не позволяет обработчику блокировать показ страницы во время прокрутки пользователя. Демонстрация доступна на <a href="https://developers.google.com/web/updates/2016/06/passive-event-listeners">сайте разработчиков Google</a>. Обратите внимание, что Edge вообще не поддерживает <code>options</code>, и добавление его без <a href="https://developer.mozilla.org/ru/docs/Web/API/EventTarget/addEventListener$edit#Safely_detecting_option_support">проверки поддержки</a> помешает использовать аргумент <code>useCapture</code>.</p> <pre class="brush: js notranslate">/* Feature detection */ var passiveSupported = false; @@ -437,7 +437,7 @@ elem.addEventListener( passiveSupported ? { passive: true } : false );</pre> -<p>Установка <code>passive</code> не имеет значения для основного события {{event ("scroll")}}, поскольку его нельзя отменить, поэтому его слушатель в любом случае не может блокировать показ страницы.</p> +<p>Установка <code>passive</code> не имеет значения для основного события {{event ("scroll")}}, поскольку его нельзя отменить, поэтому его обработчик в любом случае не может блокировать показ страницы.</p> <h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость</h2> |