From 415bedec7d098435d3393eba2fe69e0c96f3dbf3 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Thu, 18 Mar 2021 21:44:39 +0300 Subject: Unify translation of "слушатель" (#207) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Unify translation of "слушатель" * Fixes after review --- files/ru/conflicting/web/api/push_api/index.html | 2 +- .../conflicting/web/api/web_storage_api/index.html | 2 +- .../techniques/controls_gamepad_api/index.html | 4 +- .../mouse_controls/index.html | 2 +- .../paddle_and_keyboard_controls/index.html | 4 +- files/ru/glossary/dom/index.html | 2 +- .../javascript/asynchronous/introducing/index.html | 2 +- .../asynchronous/timeouts_and_intervals/index.html | 8 +-- .../building_blocks/conditionals/index.html | 4 +- .../javascript/building_blocks/events/index.html | 18 +++---- .../building_blocks/looping_code/index.html | 2 +- .../client-side_storage/index.html | 10 ++-- .../first_steps/a_first_splash/index.html | 6 +-- .../adding_bouncing_balls_features/index.html | 2 +- .../development_environment/index.html | 4 +- .../express_nodejs/introduction/index.html | 2 +- .../express_nodejs/skeleton_website/index.html | 2 +- .../add-ons/webextensions/api/windows/index.html | 2 +- .../webextensions/content_scripts/index.html | 2 +- .../intercept_http_requests/index.html | 6 +-- .../your_second_webextension/index.html | 10 ++-- .../1.5/using_firefox_1.5_caching/index.html | 2 +- files/ru/mozilla/firefox/releases/65/index.html | 2 +- files/ru/tools/page_inspector/index.html | 2 +- .../debugging_firefox_desktop/index.html | 4 +- .../index.html | 2 +- files/ru/web/api/abortcontroller/abort/index.html | 2 +- .../api/abortcontroller/abortcontroller/index.html | 2 +- files/ru/web/api/abortcontroller/signal/index.html | 2 +- files/ru/web/api/abortsignal/index.html | 2 +- files/ru/web/api/audiocontext/index.html | 2 +- .../api/baseaudiocontext/createpanner/index.html | 6 +-- .../api/broadcastchannel/postmessage/index.html | 2 +- files/ru/web/api/cachestorage/match/index.html | 2 +- .../api/document/domcontentloaded_event/index.html | 2 +- .../api/document_object_model/events/index.html | 6 +-- files/ru/web/api/element/index.html | 2 +- .../ru/web/api/element/mouseenter_event/index.html | 2 +- .../ru/web/api/element/mouseleave_event/index.html | 2 +- .../event/comparison_of_event_targets/index.html | 2 +- .../api/event/stopimmediatepropagation/index.html | 4 +- files/ru/web/api/eventsource/index.html | 2 +- .../api/eventtarget/addeventlistener/index.html | 58 +++++++++++----------- .../web/api/globaleventhandlers/oninput/index.html | 2 +- .../drag_operations/index.html | 16 +++--- .../api/htmlelement/pointerover_event/index.html | 2 +- .../api/htmlelement/transitionend_event/index.html | 2 +- files/ru/web/api/htmlmediaelement/index.html | 2 +- .../api/indexeddb_api/using_indexeddb/index.html | 2 +- files/ru/web/api/navigatoronline/online/index.html | 4 +- files/ru/web/api/rtcpeerconnection/index.html | 2 +- .../using_server-sent_events/index.html | 8 +-- files/ru/web/api/sharedworker/index.html | 2 +- files/ru/web/api/speechrecognition/index.html | 6 +-- .../web/api/window/beforeunload_event/index.html | 2 +- files/ru/web/api/window/index.html | 4 +- files/ru/web/api/window/postmessage/index.html | 4 +- files/ru/web/api/xmlhttprequest/index.html | 2 +- .../media_queries/testing_media_queries/index.html | 10 ++-- files/ru/web/css/pointer-events/index.html | 2 +- files/ru/web/events/index.html | 8 +-- .../overview_of_events_and_handlers/index.html | 6 +-- files/ru/web/html/cors_enabled_image/index.html | 2 +- files/ru/web/html/element/input/radio/index.html | 2 +- files/ru/web/http/cors/index.html | 2 +- files/ru/web/http/csp/index.html | 2 +- .../http/headers/x-content-type-options/index.html | 2 +- .../javascript/reference/operators/this/index.html | 6 +-- files/ru/web/web_components/index.html | 4 +- 69 files changed, 157 insertions(+), 157 deletions(-) (limited to 'files') diff --git a/files/ru/conflicting/web/api/push_api/index.html b/files/ru/conflicting/web/api/push_api/index.html index 7b84af7c0a..da06239951 100644 --- a/files/ru/conflicting/web/api/push_api/index.html +++ b/files/ru/conflicting/web/api/push_api/index.html @@ -64,7 +64,7 @@ original_slug: Web/API/Push_API/Using_the_Push_API
  • Подписка на сервис push-уведомлений с помощью {{domxref("PushManager.subscribe()")}}.
  • Запрашивание конечной точки, соответствующей подписчику, и генерация публичного ключа клиента ({{domxref("PushSubscription.endpoint")}} и {{domxref("PushSubscription.getKey()")}}. Заметьте, что getKey() на данный момент экспериментальная технологий и доступна только в Firefox.)
  • Отправка данных на сервер, чтобы тот мог присылать push-сообщения, когда необходимо. Это демо использует {{domxref("XMLHttpRequest")}}, но вы можете использовать Fetch.
  • -
  • Если вы используете Channel Messaging API для связи с сервис воркером, установите новый канал связи ({{domxref("MessageChannel.MessageChannel()")}}) и отправьте port2 сервис воркеру с помощью вызова {{domxref("Worker.postMessage()")}} для того, чтобы открыть канал связи. Вы так же должны настроить слушателя для ответов на сообщения, которые будут отправляться обратно с сервис воркера.
  • +
  • Если вы используете Channel Messaging API для связи с сервис воркером, установите новый канал связи ({{domxref("MessageChannel.MessageChannel()")}}) и отправьте port2 сервис воркеру с помощью вызова {{domxref("Worker.postMessage()")}} для того, чтобы открыть канал связи. Вы так же должны настроить обработчик ответов на сообщения, которые будут отправляться обратно с сервис воркера.
  • На стороне сервера сохраните конечную точку и все остальные необходимые данные, чтобы они были доступны, когда будет необходимо отправить push-сообщение добавленному подписчику (мы используем простой текстовый файл, но вы можете использовать базу данных или все что угодно на ваш вкус). В приложении на продакшене убедитесь, что скрываете эти данные, так что злоумышленники не смогут украсть конечную точку и разослать спам подписчикам в push-сообщениях.
  • Для отправки push-сообщений необходимо отослать HTTP POST конечному URL. Запрос должен включать TTL заголовок, который ограничивает время пребывания сообщения в очереди, если пользователь не в сети. Для добавления полезной информации в запросе, необходимо зашифровать ее (что включает публичный ключ клиента). В нашем примере мы используем web-push модуль, который управляет всей тяжелой работой.
  • Поверх в сервис воркере настройте обработчик событий push для ответов на полученные push-сообщения. diff --git a/files/ru/conflicting/web/api/web_storage_api/index.html b/files/ru/conflicting/web/api/web_storage_api/index.html index 25f0170d91..cbcff26342 100644 --- a/files/ru/conflicting/web/api/web_storage_api/index.html +++ b/files/ru/conflicting/web/api/web_storage_api/index.html @@ -82,7 +82,7 @@ alert( "username = " + sessionStorage.getItem("username")); field.value = sessionStorage.getItem("autosave"); } - // Прослушивать изменения значения текстового поля + // Обрабатывать изменения значения текстового поля field.addEventListener("change", function() { // И сохранить результаты в объект хранилища сессий sessionStorage.setItem("autosave", field.value); diff --git a/files/ru/games/techniques/controls_gamepad_api/index.html b/files/ru/games/techniques/controls_gamepad_api/index.html index 7931059e64..512f3143d4 100644 --- a/files/ru/games/techniques/controls_gamepad_api/index.html +++ b/files/ru/games/techniques/controls_gamepad_api/index.html @@ -87,7 +87,7 @@ translation_of: Games/Techniques/Controls_Gamepad_API ], -

    Это может быть по-разному для разных типов геймпадов, таких как контроллер PS3 (или безымянный, универсальный), поэтому вы должны быть осторожны и не просто предполагать, что кнопка, которую вы ожидаете, будет той же самой кнопкой, которую вы на самом деле получите. Затем мы настроили два прослушивателя событий, чтобы получить данные:

    +

    Это может быть по-разному для разных типов геймпадов, таких как контроллер PS3 (или безымянный, универсальный), поэтому вы должны быть осторожны и не просто предполагать, что кнопка, которую вы ожидаете, будет той же самой кнопкой, которую вы на самом деле получите. Затем мы настроили два обработчика событий, чтобы получить данные:

    window.addEventListener("gamepadconnected", gamepadAPI.connect);
     window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);
    @@ -175,7 +175,7 @@ window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);
     
     

    Обнаружение нажатия кнопок

    -

    Метод buttonPressed() также помещается в основной игровой цикл для прослушивания нажатий кнопок. Для этого требуется два параметра - кнопка, которую мы хотим прослушать, и (необязательно) способ сообщить игре, что удержание кнопки принято. Без него вам придется отпустить кнопку и нажать ее снова, чтобы получить желаемый эффект.

    +

    Метод buttonPressed() также помещается в основной игровой цикл для обработки нажатий кнопок. Для этого требуется два параметра - кнопка, которую мы хотим прослушать, и (необязательно) способ сообщить игре, что удержание кнопки принято. Без него вам придется отпустить кнопку и нажать ее снова, чтобы получить желаемый эффект.

    buttonPressed: function(button, hold) {
       var newPress = false;
    diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html
    index 50ed197298..e6f61bebe1 100644
    --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html
    +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html
    @@ -23,7 +23,7 @@ original_slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Управлен
     
     

    Отслеживание движений мыши

    -

    Отслеживание движений мыши еще проще, чем прослушивание нажатий клавиш. Все, что нам нужно, это следить за событиями {{event("mousemove")}}. Добавьте следующую строку в том же месте, как и для других событий, чуть ниже keyup event:

    +

    Отслеживание движений мыши еще проще, чем обработка нажатий клавиш. Все, что нам нужно, это следить за событиями {{event("mousemove")}}. Добавьте следующую строку в том же месте, как и для других событий, чуть ниже keyup event:

    document.addEventListener("mousemove", mouseMoveHandler, false);
    diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html index ad4caeefa1..f96c85e459 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html @@ -39,7 +39,7 @@ var paddleX = (canvas.width-paddleWidth)/2;
    • Две переменные для хранения информации о том, левая или правая кнопка управления нажата.
    • -
    • Два слушателя для событий keydown и keyup — мы хотим запустить некоторый код для обработки движения ракетки при нажатии кнопок.
    • +
    • Два обработчика для событий keydown и keyup — мы хотим запустить некоторый код для обработки движения ракетки при нажатии кнопок.
    • Две функции обработки события keydown и keyup код, который будет выполняться при нажатии кнопок.
    • Возможность перемещения ракетки влево и вправо
    @@ -49,7 +49,7 @@ var paddleX = (canvas.width-paddleWidth)/2;
    var rightPressed = false;
     var leftPressed = false;
    -

    Значением по умолчанию для обоих является false, так как изначально кнопки не нажаты. Для прослушивания нажатий клавиш, мы создадим два обработчика событий. Добавьте следующие строки чуть выше функции setInterval() в нижней части JavaScript:

    +

    Значением по умолчанию для обоих является false, так как изначально кнопки не нажаты. Для обработки нажатий клавиш, мы создадим два обработчика событий. Добавьте следующие строки чуть выше функции setInterval() в нижней части JavaScript:

    document.addEventListener("keydown", keyDownHandler, false);
     document.addEventListener("keyup", keyUpHandler, false);
    diff --git a/files/ru/glossary/dom/index.html b/files/ru/glossary/dom/index.html index d9ed56b665..e6296a10b4 100644 --- a/files/ru/glossary/dom/index.html +++ b/files/ru/glossary/dom/index.html @@ -8,7 +8,7 @@ original_slug: Словарь/DOM ---

    DOM (Document Object Model) это {{glossary("API")}} который представляет и взаимодействует со всеми {{glossary("HTML")}} или {{glossary("XML")}} документами. DOM это модель документа загруженная в {{glossary("browser")}} и представляющая документ как узел дерева, где каждый узел представляет часть (e.g. an {{Glossary("element")}} документа, строку текста, или комментарий).

    -

    DOM это самый используемый {{Glossary("API")}} в {{glossary("World Wide Web","Web")}} потому, что он даёт коду запущенному в браузере доступ и взаимодействие с каждым узлом в документе. Узлы могут быть созданы, перемещены и изменены. Прослушиватели событий могут быть добавлены к узлам и срабатывают при наступлении данного события.

    +

    DOM это самый используемый {{Glossary("API")}} в {{glossary("World Wide Web","Web")}} потому, что он даёт коду запущенному в браузере доступ и взаимодействие с каждым узлом в документе. Узлы могут быть созданы, перемещены и изменены. Обработчики событий могут быть добавлены к узлам и срабатывают при наступлении данного события.

    DOM не был определен изначально — он пришел когда браузеры начали реализовывать поддержку {{Glossary("JavaScript")}}. Этот унаследованный DOM иногда называют DOM 0. Сегодня, W3C руководит процессом спецификации DOM, и DOM Working Group в настоящее время подготавливают 4-ую версию.

    diff --git a/files/ru/learn/javascript/asynchronous/introducing/index.html b/files/ru/learn/javascript/asynchronous/introducing/index.html index 03d6ad86db..6c273c9052 100644 --- a/files/ru/learn/javascript/asynchronous/introducing/index.html +++ b/files/ru/learn/javascript/asynchronous/introducing/index.html @@ -102,7 +102,7 @@ let blob = response.blob(); document.body.appendChild(pElem); }); -

    Первый параметр — тип прослушиваемого события, второй параметр — функция обратного вызова, вызываемая при срабатывании события.

    +

    Первый параметр — тип обрабатываемого события, второй параметр — функция обратного вызова, вызываемая при срабатывании события.

    При передаче функции обратного вызова как аргумента в другую функцию, мы передаем только ссылку на функцию как аргумент, следовательно колбэк функция не выполняется мгновенно. Где-то существует "обратный вызов" (отсюда и название), выполняющийся асинхронно внутри тела, содержащего функцию. Эта функция должна выполнять функцию обратного вызова в нужный момент.

    diff --git a/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html index bdf187b33f..d2707a30b6 100644 --- a/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html +++ b/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html @@ -421,7 +421,7 @@ let rAF;

    Активное обучение: запуск и остановка нашей анимации

    -

    В этом упражнении мы хотели бы, чтобы вы протестировали метод cancelAnimationFrame (), взяв наш предыдущий пример и обновив его, добавив прослушиватель событий для запуска и остановки счетчика при щелчке мышью в любом месте страницы.

    +

    В этом упражнении мы хотели бы, чтобы вы протестировали метод cancelAnimationFrame (), взяв наш предыдущий пример и обновив его, добавив обработчик событий для запуска и остановки счетчика при щелчке мышью в любом месте страницы.

    Подсказки:

    @@ -547,7 +547,7 @@ spinnerContainer.style.display = 'none'; }
  • -

    Хорошо, хватит подготовки! Пришло время сделать игру доступной! Добавьте в свой код следующий блок. Функция start () вызывает draw (), чтобы запустить вращение спиннера и отобразить его в пользовательском интерфейсе, скрыть кнопку Start, чтобы вы не могли испортить игру, запустив ее несколько раз одновременно, и запускает вызов setTimeout (), который выполняется функция setEndgame () по прошествии случайного интервала от 5 до 10 секунд. Следующий блок также добавляет прослушиватель событий к вашей кнопке для запуска функции start () при ее нажатии.

    +

    Хорошо, хватит подготовки! Пришло время сделать игру доступной! Добавьте в свой код следующий блок. Функция start () вызывает draw (), чтобы запустить вращение спиннера и отобразить его в пользовательском интерфейсе, скрыть кнопку Start, чтобы вы не могли испортить игру, запустив ее несколько раз одновременно, и запускает вызов setTimeout (), который выполняется функция setEndgame () по прошествии случайного интервала от 5 до 10 секунд. Следующий блок также добавляет обработчик событий к вашей кнопке для запуска функции start () при ее нажатии.

    btn.addEventListener('click', start);
     
    @@ -601,12 +601,12 @@ function start() {
       
    1. Во-первых, отмените анимацию спиннера с помощью {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (всегда полезно очистить ненужные процессы), и скройте контейнер счетчика.
    2. Затем, отобразите абзац с результатами и установите для его текстового содержимого значение "PLAYERS GO!!"  чтобы сообщить игрокам, что теперь они могут нажать свою кнопку, чтобы победить.
    3. -
    4. Прикрепите к документу прослушиватель событий keydown . При нажатии любой кнопки запускается функция keyHandler().
    5. +
    6. Прикрепите к документу обработчик событий keydown . При нажатии любой кнопки запускается функция keyHandler().
    7. Внутри keyHandler(), код включает объект события в качестве параметра (представленного e) — его свойство {{domxref("KeyboardEvent.key", "key")}} содержит только что нажатую клавишу, и вы можете использовать это для ответа на определенные нажатия клавиш определенными действиями.
    8. Установите для переменной isOver значение false, чтобы мы могли отслеживать, были ли нажаты правильные клавиши, чтобы игрок 1 или 2 выиграл. Мы не хотим, чтобы игра заканчивалась при нажатии неправильной клавиши.
    9. Регистрация e.key в консоли, это полезный способ узнать значение различных клавиш, которые вы нажимаете.
    10. Когда e.key принимает значение "a", отобразить сообщение о том, что Player 1 выиграл, а когда e.key это "l", отобразить сообщение о том, что Player 2 выиграл. (Note: Это будет работать только со строчными буквами a и l — если переданы прописные A или L , это считается другими клавишами!) Если была нажата одна из этих клавиш, установите для isOver значение true.
    11. -
    12. Только если isOver равно true, удалите прослушиватель событий keydown с помощью {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} чтобы после того, как произошло выигрышное нажатие, больше не было возможности ввода с клавиатуры, чтобы испортить финальный результат игры. Вы также используете setTimeout() для вызова reset() через 5 секунд — как объяснялось ранее, эта функция сбрасывает игру обратно в исходное состояние, чтобы можно было начать новую игру.
    13. +
    14. Только если isOver равно true, удалите обработчик событий keydown с помощью {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} чтобы после того, как произошло выигрышное нажатие, больше не было возможности ввода с клавиатуры, чтобы испортить финальный результат игры. Вы также используете setTimeout() для вызова reset() через 5 секунд — как объяснялось ранее, эта функция сбрасывает игру обратно в исходное состояние, чтобы можно было начать новую игру.
  • diff --git a/files/ru/learn/javascript/building_blocks/conditionals/index.html b/files/ru/learn/javascript/building_blocks/conditionals/index.html index 25581ae8bb..a4f5a6e2bf 100644 --- a/files/ru/learn/javascript/building_blocks/conditionals/index.html +++ b/files/ru/learn/javascript/building_blocks/conditionals/index.html @@ -143,7 +143,7 @@ function setWeather() {
    1. Здесь у нас есть элемент HTML {{htmlelement("select")}} который позволяет нам выбирать разные варианты погоды и простой абзац.
    2. -
    3. В JavaScript, мы создаем ссылки на элементы {{htmlelement("select")}} и {{htmlelement("p")}}, и добавляем обработчик события для элемента <select> , чтобы при изменении его значения, запускалась функция setWeather().
    4. +
    5. В JavaScript мы создаем ссылки на элементы {{htmlelement("select")}} и {{htmlelement("p")}} и добавляем обработчик события элемента <select>, чтобы при его изменении значения запускалась функция setWeather().
    6. Когда функция будет запущена, первоначально мы определим значение переменной choice, которая равна выбранному значению в элементе  <select>. Затем мы используем условный оператор для отображения текста внутри абзаца в зависимости от того, какое значение у переменной  choice. Обратите внимание, как все условия проверяются в else if() {...} блоках, за исключением первого, который использует if() {...}блок.
    7. Последний выбор, внутри  else {...} блока, в основном является «последним средством» — код внутри него будет запущен, если ни одно из условий не будет true. В этом случае он служит для удаления текста из абзаца, если ничего не выбрано, например, если пользователь решает повторно выбрать опцию "--Сделайте выбор--" которая указана в начале.
    @@ -383,7 +383,7 @@ select.onchange = function() {

    Мы используем элемент {{htmlelement('select')}} для выбора темы (черная или белая), а также простой {{htmlelement('h1')}} для отображения заголовка веб-сайта. Кроме того, у нас есть функция update(), принимающая в качестве параметров (входных данных) два цвета. В качестве фона используется первый переданный цвет, а в качестве цвета текста – второй переданный цвет.

    -

    Наконец, у нас есть слушатель событий onchange , использующийся для запуска функции, содержащей тернарный оператор. Сначала она проверяет условие — select.value === 'black'. Если возвращается true, мы запускаем функцию update() с параметрами черного и белого, в результате чего получаем черный цвет фона и белый цвет текста. Если возвращается false, мы запускаем функцию update() с параметрами белого и черного, в результате чего цвета веб-сайта меняются на противоположные.

    +

    Наконец, у нас есть обработчик событий onchange , использующийся для запуска функции, содержащей тернарный оператор. Сначала она проверяет условие — select.value === 'black'. Если возвращается true, мы запускаем функцию update() с параметрами черного и белого, в результате чего получаем черный цвет фона и белый цвет текста. Если возвращается false, мы запускаем функцию update() с параметрами белого и черного, в результате чего цвета веб-сайта меняются на противоположные.

    Note: Вы можете найти этот пример на GitHub (также увидеть как он работает.)

    diff --git a/files/ru/learn/javascript/building_blocks/events/index.html b/files/ru/learn/javascript/building_blocks/events/index.html index 3959adcb60..054bc58159 100644 --- a/files/ru/learn/javascript/building_blocks/events/index.html +++ b/files/ru/learn/javascript/building_blocks/events/index.html @@ -48,7 +48,7 @@ original_slug: Learn/JavaScript/Building_blocks/События

    Подробнее о событиях можно посмотреть в Справочнике по событиям.

    -

    Каждое доступное событие имеет обработчик событий  блок кода (обычно это функция JavaScript, вводимая вами в качестве разработчика), который будет запускаться при срабатывании события. Когда такой блок кода определен на запуск в ответ на возникновение события, мы говорим, что мы регистрируем обработчик событий. Обратите внимание, что обработчики событий иногда называют прослушивателями событий (event listeners). Они в значительной степени взаимозаменяемы для наших целей, хотя, строго говоря, они работают вместе. Прослушиватель отслеживает событие, а обработчик — это код, который запускается в ответ на событие.

    +

    Каждое доступное событие имеет обработчик событий  блок кода (обычно это функция JavaScript, вводимая вами в качестве разработчика), который будет запускаться при срабатывании события. Когда такой блок кода определен на запуск в ответ на возникновение события, мы говорим, что мы регистрируем обработчик событий. Обратите внимание, что обработчики событий иногда называют слушателями событий (от англ. event listeners). Они в значительной степени взаимозаменяемы для наших целей, хотя, строго говоря, они работают вместе. Слушатель отслеживает событие, а обработчик — это код, который запускается в ответ на событие.

    Примечание: Важно отметить, что веб-события не являются частью основного языка JavaScript. Они определены как часть JavaScript-API, встроенных в браузер.

    @@ -89,15 +89,15 @@ btn.onclick = function() {

    События, как понятие, относятся не только к JavaScript — большинство языков программирования имеют модель событий, способ работы которой часто отличается от модели в JavaScript. Фактически, даже модель событий в JavaScript для веб-страниц отличается от модели событий для просто JavaScript, поскольку используются они в разных средах.

    -

    Например, Node.js — очень популярная среда исполнения JavaScript, которая позволяет разработчикам использовать JavaScript для создания сетевых и серверных приложений. Модель событий Node.js основана на том, что существуют прослушиватели, отслеживающие события, и эмиттеры (передатчики), которые периодически генерируют события. В общем-то, это похоже на модель событий в JavaScript для веб-страниц, но код совсем другой. В этой модели используется функция on() для регистрации прослушивателей событий, и функция once() для регистрации прослушивателя событий, который отключается после первого срабатывания. Хорошим примером использования являются протоколы событий HTTP connect event docs.

    +

    Например, Node.js — очень популярная среда исполнения JavaScript, которая позволяет разработчикам использовать JavaScript для создания сетевых и серверных приложений. Модель событий Node.js основана на том, что существуют обработчики, отслеживающие события, и эмиттеры (передатчики), которые периодически генерируют события. В общем-то, это похоже на модель событий в JavaScript для веб-страниц, но код совсем другой. В этой модели используется функция on() для регистрации обработчиков событий, и функция once() для регистрации обработчика событий, который отключается после первого срабатывания. Хорошим примером использования являются протоколы событий HTTP connect event docs.

    -

    Вы также можете использовать JavaScript для создания кросс-браузерных расширений — улучшения функциональности браузера с помощью технологии WebExtensions. В отличии от модели веб-событий здесь свойства прослушивателей событий пишутся в так называемом регистре CamelCase (например, onMessage, а не onmessage) и должны сочетаться с функцией addListener. См. runtime.onMessage page для примера.

    +

    Вы также можете использовать JavaScript для создания кросс-браузерных расширений — улучшения функциональности браузера с помощью технологии WebExtensions. В отличии от модели веб-событий здесь свойства обработчиков событий пишутся в так называемом регистре CamelCase (например, onMessage, а не onmessage) и должны сочетаться с функцией addListener. См. runtime.onMessage page для примера.

    На данном этапе обучения вам не нужно особо разбираться в различных средах программирования, однако важно понимать, что принцип работы событий в них отличается.

    Способы использования веб-событий

    -

    Существует множество различных способов добавления кода прослушивателя событий на веб-страницы так, чтобы он срабатывал при возникновении соответствующего события. В этом разделе мы рассмотрим различные механизмы и обсудим, какие из них следует использовать.

    +

    Существует множество различных способов добавления кода обработчика событий на веб-страницы так, чтобы он срабатывал при возникновении соответствующего события. В этом разделе мы рассмотрим различные механизмы и обсудим, какие из них следует использовать.

    Свойства обработчика событий

    @@ -204,13 +204,13 @@ btn.addEventListener('click', bgChange); document.body.style.backgroundColor = rndCol; }); -

    Этот механизм имеет некоторые преимущества по сравнению с более старыми механизмами, рассмотренными ранее. Например, существует аналогичная функция removeEventListener(), которая удаляет ранее добавленный прослушиватель. Это приведет к удалению набора слушателей в первом блоке кода в этом разделе:

    +

    Этот механизм имеет некоторые преимущества по сравнению с более старыми механизмами, рассмотренными ранее. Например, существует аналогичная функция removeEventListener(), которая удаляет ранее добавленный обработчик. Это приведет к удалению набора обработчиков в первом блоке кода в этом разделе:

    btn.removeEventListener('click', bgChange);

    Это не важно для простых небольших программ, но для более крупных и более сложных программ он может повысить эффективность очистки старых неиспользуемых обработчиков событий. Кроме того, это позволяет вам иметь одну и ту же кнопку, выполняющую различные действия в разных обстоятельствах — все, что вам нужно сделать, это добавить/удалить обработчики событий, если это необходимо.

    -

    Также, вы можете зарегистрировать несколько обработчиков для одного и того же прослушивателя. Следующие два обработчика не будут применяться:

    +

    Также вы можете зарегистрировать несколько обработчиков для одного и того же события на элементе. Следующие два обработчика не будут применяться:

    myElement.onclick = functionA;
     myElement.onclick = functionB;
    @@ -235,7 +235,7 @@ myElement.addEventListener('click', functionB);
  • События уровня 2 DOM (addEventListener() и т. д.) являются более мощными, но также могут стать более сложными и хуже поддерживаться (поддерживается еще в Internet Explorer 9). Вам также стоит поэкспериментировать с ними и стремиться использовать их там, где это возможно.
  • -

    Основные преимущества третьего механизма заключаются в том, что при необходимости можно удалить код обработчика событий, используя removeEventListener(), и так же можно добавить несколько элементов-слушателей того же типа к элементам. Например, вы можете вызвать addEventListener('click', function() {...}) для элемента несколько раз, с разными функциями, указанными во втором аргументе. Это невозможно при использовании свойств обработчика событий, поскольку любые последующие попытки установить свойство будут перезаписывать более ранние, например:

    +

    Основные преимущества третьего механизма заключаются в том, что при необходимости можно удалить код обработчика событий, используя removeEventListener(), и так же можно добавить несколько элементов-обработчиков того же типа к элементам. Например, вы можете вызвать addEventListener('click', function() {...}) для элемента несколько раз, с разными функциями, указанными во втором аргументе. Это невозможно при использовании свойств обработчика событий, поскольку любые последующие попытки установить свойство будут перезаписывать более ранние, например:

    element.onclick = function1;
     element.onclick = function2;
    @@ -564,9 +564,9 @@ video.onclick = function() {
     
     

    Делегирование события

    -

    Всплытие также позволяет нам использовать делегирование событий.  Если у какого-либо родительского элемента есть множество дочерних элементов, и вы хотите, чтобы определенный код выполнялся при щелчке (событии) на каждом из дочерних элементов, можно установить прослушиватель событий на родительском элементе и события, происходящие на дочерних элементах будут всплывать до их родителя. При этом не нужно устанавливать прослушивателя событий на каждом дочернем элементе.

    +

    Всплытие также позволяет нам использовать делегирование событий.  Если у какого-либо родительского элемента есть множество дочерних элементов, и вы хотите, чтобы определенный код выполнялся при щелчке (событии) на каждом из дочерних элементов, можно установить обработчик событий на родительском элементе и события, происходящие на дочерних элементах будут всплывать до их родителя. При этом не нужно устанавливать обработчик событий на каждом дочернем элементе.

    -

    Хорошим примером является серия элементов списка. Если вы хотите, чтобы каждый из них, например, отображал сообщение при нажатии, вы можете установить прослушиватель событий click для родительского элемента <ul> и он будет всплывать в элементах списка.

    +

    Хорошим примером является серия элементов списка. Если вы хотите, чтобы каждый из них, например, отображал сообщение при нажатии, вы можете установить обработчик событий click для родительского элемента <ul> и он будет всплывать в элементах списка.

    Эту концепцию объясняет в своем блоге Дэвид Уолш, где приводит несколько примеров. (см. How JavaScript Event Delegation Works.)

    diff --git a/files/ru/learn/javascript/building_blocks/looping_code/index.html b/files/ru/learn/javascript/building_blocks/looping_code/index.html index 537a6cc04e..95c0cddfe9 100644 --- a/files/ru/learn/javascript/building_blocks/looping_code/index.html +++ b/files/ru/learn/javascript/building_blocks/looping_code/index.html @@ -369,7 +369,7 @@ btn.addEventListener('click', function() {
    1. Прежде всего у нас определены некоторые переменные: у нас есть массив с контактной информацией, каждый элемент которого это строка, содержащая в себе имя и номер телефона, которые разделены двоеточием.
    2. -
    3. Далее мы применяем обработчик события для кнопки (btn), чтобы при её нажатии запускался код для поиска и отображения результатов.
    4. +
    5. Далее мы применяем обработчик события кнопки (btn), чтобы при её нажатии запускался код для поиска и отображения результатов.
    6. Мы сохраняем значение, введенное в текстовое поле, в переменную  searchName, затем очищаем введенный текст и снова фокусируемся на текстовом поле для нового поиска.
    7. Теперь перейдем к интересующей нас части — к циклу for:
        diff --git a/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.html b/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.html index 0f50a5eed4..da1f88f0aa 100644 --- a/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.html @@ -187,7 +187,7 @@ const h1 = document.querySelector('h1'); const personalGreeting = document.querySelector('.personal-greeting');
  • -

    Далее нам нужно включить небольшой прослушиватель событий, чтобы форма фактически не отправляла себя при нажатии кнопки отправки, так как это не то поведение, которое нам нужно. Добавьте этот фрагмент ниже вашего предыдущего кода:

    +

    Далее нам нужно включить небольшой обработчик событий, чтобы форма фактически не отправляла себя при нажатии кнопки отправки, так как это не то поведение, которое нам нужно. Добавьте этот фрагмент ниже вашего предыдущего кода:

    // Stop the form from submitting when a button is pressed
     form.addEventListener('submit', function(e) {
    @@ -195,7 +195,7 @@ form.addEventListener('submit', function(e) {
     });
  • -

    Теперь нам нужно добавить прослушиватель событий, функция-обработчик которого будет запускаться при нажатии кнопки «Say hello». В комментариях подробно объясняется, что делает каждый бит, но в сущности здесь мы берем имя, которое пользователь ввел в поле ввода текста, и сохраняем его в веб-хранилище с помощью setItem(), затем запускаем функцию nameDisplayCheck(), которая будет обрабатывать обновление фактического текста сайта. Добавьте это в конец: 

    +

    Теперь нам нужно добавить обработчик событий, функция-обработчик которого будет запускаться при нажатии кнопки «Say hello». В комментариях подробно объясняется, что делает каждый бит, но в сущности здесь мы берем имя, которое пользователь ввел в поле ввода текста, и сохраняем его в веб-хранилище с помощью setItem(), затем запускаем функцию nameDisplayCheck(), которая будет обрабатывать обновление фактического текста сайта. Добавьте это в конец: 

    // run function when the 'Say hello' button is clicked
     submitBtn.addEventListener('click', function() {
    @@ -207,7 +207,7 @@ submitBtn.addEventListener('click', function() {
     });
  • -

    На этом этапе нам также необходим прослушиватель событий для запуска функции при нажатии кнопки «Forget» — она будет отображена только после того как кнопка «Say hello» будет нажата (две формы состояния для переключения между ними). В этой функции мы удаляем переменную name из веб-хранилища используя removeItem(), затем снова запускаем nameDisplayCheck() для обновления. Добавьте этот код в конец:

    +

    На этом этапе нам также необходим обработчик событий для запуска функции при нажатии кнопки «Forget» — она будет отображена только после того как кнопка «Say hello» будет нажата (две формы состояния для переключения между ними). В этой функции мы удаляем переменную name из веб-хранилища используя removeItem(), затем снова запускаем nameDisplayCheck() для обновления. Добавьте этот код в конец:

    // run function when the 'Forget' button is clicked
     forgetBtn.addEventListener('click', function() {
    @@ -710,7 +710,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) {
     
     

    В следующий раз, когда страница с сервис-воркером будет запрошена (например когда страница будет перезагружена), сервис-воркер запустится на этой странице и начнет контролировать её. Когда это произойдет, событие install будет вызвано в сервис-воркере; вы можете написать код внутри сервис-воркера, который будет вызван в процессе установки.

    -

    Давайте взглянем на файл сервис-воркера sw.js. Вы можете видеть, что слушатель события install зарегистрирован на self. Ключевое слово self это способ ссылки на глобальную область видимости сервис-воркера из файла с сервис-воркером.

    +

    Давайте взглянем на файл сервис-воркера sw.js. Вы можете видеть, что обработчик события install зарегистрирован на self. Ключевое слово self это способ ссылки на глобальную область видимости сервис-воркера из файла с сервис-воркером.

    Внутри обработчика install мы используем метод {{domxref("ExtendableEvent.waitUntil()")}}, доступном в объекте события, чтобы сигнализировать, что работа продолжается, и браузер не должен завершать установку, пока все задачи внутри блока не будут выполнены.

    @@ -735,7 +735,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) {

    Когда сервис-воркер зарегистрирован и установлен на странице HTML и сопутствующие ресурсы добавлены в кэш, все практически готово. Нужно сделать еще одну вещь - написать код для ответа на дальнейшие сетевые запросы.

    -

    Это то, что делает вторая часть кода файла sw.js. Мы добавили еще один слушатель к сервис-воркеру в глобальной области видимости, который запускает функцию-обработчик при событии fetch. Это происходит всякий раз, когда браузер делает запрос ресурса в директорию, где зарегистрирован сервис-воркер.

    +

    Это то, что делает вторая часть кода файла sw.js. Мы добавили еще один обработчик к сервис-воркеру в глобальной области видимости, который запускает функцию-обработчик при событии fetch. Это происходит всякий раз, когда браузер делает запрос ресурса в директорию, где зарегистрирован сервис-воркер.

    Внутри обработчика, мы сначала выводим в консоль URL запрашиваемого ресурса. Затем отдаем особый ответ на запрос, используя метод {{domxref("FetchEvent.respondWith()")}}.

    diff --git a/files/ru/learn/javascript/first_steps/a_first_splash/index.html b/files/ru/learn/javascript/first_steps/a_first_splash/index.html index 8c4817891c..9b719c4029 100644 --- a/files/ru/learn/javascript/first_steps/a_first_splash/index.html +++ b/files/ru/learn/javascript/first_steps/a_first_splash/index.html @@ -531,13 +531,13 @@ greeting;

    События (Events)

    -

    На данный момент у нас есть хорошо реализованная функция checkGuess(), но она ничего не сделает, потому что мы еще не вызвали ее. В идеале мы хотим вызывать её во время нажатия кнопки « Submit guess », и для этого нам нужно использовать событие. События - это действия, которые происходят в браузере, например, нажатие кнопки или загрузка страницы или воспроизведение видео, в ответ на которые мы можем запускать блоки кода. Конструкции, которые прослушивают событие, называются прослушивателями событий, а блоки кода, выполняемые в ответ на срабатывание событий, называются обработчиками событий.

    +

    На данный момент у нас есть хорошо реализованная функция checkGuess(), но она ничего не сделает, потому что мы еще не вызвали ее. В идеале мы хотим вызывать её во время нажатия кнопки « Submit guess », и для этого нам нужно использовать событие. События - это действия, которые происходят в браузере, например, нажатие кнопки или загрузка страницы или воспроизведение видео, в ответ на которые мы можем запускать блоки кода. Конструкции, которые прослушивают событие, называются прослушивателями событий, а блоки кода, выполняемые в ответ на срабатывание событий, называются обработчиками событий.

    Добавьте следующую строку ниже закрывающей фигурной скобки функции checkGuess():

    guessSubmit.addEventListener('click', checkGuess);
    -

    Здесь мы добавляем прослушиватель событий к кнопке guessSubmit. Это метод, который принимает два входных значения (называемые аргументами) - тип события, которое мы выслушиваем (в данном случае click) в виде строки, и код, который мы хотим запустить при возникновении события (в данном случае функция checkGuess() - обратите внимание, что нам не нужно указывать круглые скобки при записи внутри {{domxref("EventTarget.addEventListener", "addEventListener()")}}).

    +

    Здесь мы добавляем обработчик событий к кнопке guessSubmit. Это метод, который принимает два входных значения (называемые аргументами) - тип события, которое мы обработаем (в данном случае click) в виде строки, и код, который мы хотим запустить при возникновении события (в данном случае функция checkGuess() - обратите внимание, что нам не нужно указывать круглые скобки при записи внутри {{domxref("EventTarget.addEventListener", "addEventListener()")}}).

    Попробуйте сохранить и обновить код сейчас, и ваш пример должен теперь работать, но до определенного момента. Единственная проблема в том, что если вы угадаете правильный ответ или исчерпаете догадки, игра сломается, потому что мы еще не определили функцию setGameOver(), которая должна запускаться после завершения игры. Давайте добавим наш недостающий код и завершим пример функциональности.

    @@ -557,7 +557,7 @@ greeting;
    • Первые две строки отключают ввод текста и кнопку формы, устанавливая их отключенные свойства как true. Это необходимо, потому что, если бы мы этого не сделали, пользователь мог бы представить больше догадок после завершения игры, что испортит ситуацию.
    • Следующие три строки генерируют новый элемент {{htmlelement("button")}}, устанавливают его текстовую метку « Start new game» и добавляют ее к нижней части нашего HTML.
    • -
    • Последняя строка устанавливает прослушиватель событий на нашей новой кнопке, так что при нажатии на нее запускается функция resetGame().
    • +
    • Последняя строка устанавливает обработчик событий на нашей новой кнопке, так что при нажатии на нее запускается функция resetGame().

    Теперь нам нужно также определить эту функцию! Добавьте следующий код, снова в нижнюю часть вашего JavaScript:

    diff --git a/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.html b/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.html index cb606d3818..c8d163e325 100644 --- a/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.html +++ b/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.html @@ -109,7 +109,7 @@ original_slug: Learn/JavaScript/Объекты/Adding_bouncing_balls_features

    setControls()

    -

    Этот метод добавит прослушиватель событий onkeydown к объекту window, чтобы при нажатии определенных клавиш клавиатуры мы могли перемещать злой круг вокруг. Следующий код должен быть помещен внутри определения метода:

    +

    Этот метод добавит обработчик событий onkeydown к объекту window, чтобы при нажатии определенных клавиш клавиатуры мы могли перемещать злой круг вокруг. Следующий код должен быть помещен внутри определения метода:

    var _this = this;
     window.onkeydown = function(e) {
    diff --git a/files/ru/learn/server-side/express_nodejs/development_environment/index.html b/files/ru/learn/server-side/express_nodejs/development_environment/index.html
    index b1e4018563..af56287397 100644
    --- a/files/ru/learn/server-side/express_nodejs/development_environment/index.html
    +++ b/files/ru/learn/server-side/express_nodejs/development_environment/index.html
    @@ -134,7 +134,7 @@ server.listen(port, hostname, () => {
     
     
    -

    Код импортирует модуль «http» и использует его для создания сервера (createServer ()), который прослушивает HTTP-запросы на порту 3000. Затем сценарий выводит на консоль сообщение о том, какой URL-адрес браузера можно использовать для тестирования сервера. Функция createServer () принимает в качестве аргумента функцию обратного вызова, которая будет вызываться при получении HTTP-запроса - она просто возвращает ответ с кодом состояния HTTP 200 («ОК») и простым текстом «Hello World».

    +

    Код импортирует модуль «http» и использует его для создания сервера (createServer ()), который обрабатывает HTTP-запросы на порту 3000. Затем сценарий выводит на консоль сообщение о том, какой URL-адрес браузера можно использовать для тестирования сервера. Функция createServer () принимает в качестве аргумента функцию обратного вызова, которая будет вызываться при получении HTTP-запроса - она просто возвращает ответ с кодом состояния HTTP 200 («ОК») и простым текстом «Hello World».

    Замечание: не беспокойтесь, если вы еще не совсем понимаете, что делает этот код! Мы объясним наш код более подробно, как только мы начнем использовать Express!

    @@ -225,7 +225,7 @@ app.listen(
    8000, () => { }); -

    Этот код показывает минимальное веб-приложение Express «HelloWorld». Это импортирует модуль «экспресс» и использует его для создания сервера (приложения), который прослушивает HTTP-запросы на порту 8000 и выводит на консоль сообщение, объясняющее, какой URL-адрес браузера можно использовать для тестирования сервера. Функция app.get () отвечает только на запросы HTTP GET с указанным URL-путем ('/'), в этом случае вызывая функцию для отправки нашего Hello World! сообщение.
    +

    Этот код показывает минимальное веб-приложение Express «HelloWorld». Это импортирует модуль «экспресс» и использует его для создания сервера (приложения), который обрабатывает HTTP-запросы на порту 8000 и выводит на консоль сообщение, объясняющее, какой URL-адрес браузера можно использовать для тестирования сервера. Функция app.get () отвечает только на запросы HTTP GET с указанным URL-путем ('/'), в этом случае вызывая функцию для отправки нашего Hello World! сообщение.

    Создайте файл с именем index.js в корне каталога приложения «myapp» и передайте ему содержимое, показанное выше.

  • diff --git a/files/ru/learn/server-side/express_nodejs/introduction/index.html b/files/ru/learn/server-side/express_nodejs/introduction/index.html index 74b857f880..56137551aa 100644 --- a/files/ru/learn/server-side/express_nodejs/introduction/index.html +++ b/files/ru/learn/server-side/express_nodejs/introduction/index.html @@ -39,7 +39,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Introduction

    Hello Node.js

    -

    Следующий пример создаёт веб сервер который прослушивает любой HTTP запрос на URL http://127.0.0.1:8000/ — когда запрос будет получен, скрипт ответит строкой "Hello World". Если Вы уже установили node, можете, следуя шагам инструкции попробовать пример:

    +

    Следующий пример создаёт веб сервер который обрабатывает любой HTTP запрос на URL http://127.0.0.1:8000/ — когда запрос будет получен, скрипт ответит строкой "Hello World". Если Вы уже установили node, можете, следуя шагам инструкции попробовать пример:

    1. Откройте терминал (в Windows окно командной строки)
    2. diff --git a/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html b/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html index a9c608d264..6c4062c556 100644 --- a/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html +++ b/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html @@ -351,7 +351,7 @@ GET /favicon.ico 404 34.134 ms - 1335

      Заметка: require() -- это глобальная функция node  для импорта модулей в текущий файл.  Для модуля app.js указан относительный путь, а расширение файла по умолчанию (.js) опущено.

    -

    Оставшаяся часть кода настраивает порт сервера node для HTTP (определен в переменной среды или 3000, если не определен), и начинает прослушивание и протоколирование соединений и ошибок сервера. Сейчас вам не требуется дополнительных сведений о коде (все в этом файле шаблонно), но, при желании, его можно посмотреть.

    +

    Оставшаяся часть кода настраивает порт сервера node для HTTP (определен в переменной среды или 3000, если не определен), и начинает обработку и протоколирование соединений и ошибок сервера. Сейчас вам не требуется дополнительных сведений о коде (все в этом файле шаблонно), но, при желании, его можно посмотреть.

    Файл app.js

    diff --git a/files/ru/mozilla/add-ons/webextensions/api/windows/index.html b/files/ru/mozilla/add-ons/webextensions/api/windows/index.html index 889210561b..7a6bcd7cba 100644 --- a/files/ru/mozilla/add-ons/webextensions/api/windows/index.html +++ b/files/ru/mozilla/add-ons/webextensions/api/windows/index.html @@ -5,7 +5,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/windows ---
    {{AddonSidebar}}
    -

    Взаимодействие с окнами браузера. Вы можете использовать этот API, чтобы получить информацию об открытых окнах, а также открывать, изменять и закрывать окна. Вы также можете слушать события открытия, закрытия окна, и активировать события.

    +

    Взаимодействие с окнами браузера. Вы можете использовать этот API, чтобы получить информацию об открытых окнах, а также открывать, изменять и закрывать окна. Вы также можете обрабатывать события открытия, закрытия окна, и активировать события.

    Types

    diff --git a/files/ru/mozilla/add-ons/webextensions/content_scripts/index.html b/files/ru/mozilla/add-ons/webextensions/content_scripts/index.html index 894300c853..4f5985a60b 100644 --- a/files/ru/mozilla/add-ons/webextensions/content_scripts/index.html +++ b/files/ru/mozilla/add-ons/webextensions/content_scripts/index.html @@ -226,7 +226,7 @@ window.confirm("Вы уверены?"); // вызывает оригинальн -

    Например, представьте встраиваемый скрипт, который прослушивает веб-страницу на нажатие левой кнопки мыши.

    +

    Например, представьте встраиваемый скрипт, который обрабатывает нажатие левой кнопки мыши на веб-странице.

    Если нажатие было произведено по ссылке, встраиваемый скрипт отправляет сообщение фоновому скрипту со значение URL в ссылке:

    diff --git a/files/ru/mozilla/add-ons/webextensions/intercept_http_requests/index.html b/files/ru/mozilla/add-ons/webextensions/intercept_http_requests/index.html index 91941e4595..2ecab08bdf 100644 --- a/files/ru/mozilla/add-ons/webextensions/intercept_http_requests/index.html +++ b/files/ru/mozilla/add-ons/webextensions/intercept_http_requests/index.html @@ -7,7 +7,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests
    -

    При наличии глубокой иерархии количество отправляемых событий mouseenter может быть довольно большим и вызывать значительные проблемы с производительностью. В таких случаях лучше прослушивать события mouseover.

    +

    При наличии глубокой иерархии количество отправляемых событий mouseenter может быть довольно большим и вызывать значительные проблемы с производительностью. В таких случаях лучше обрабатывать события mouseover.

    В сочетании с соответствующим событием mouseleave (которое запускается в элементе, когда мышь покидает область содержимого), событие mouseenter действует очень похоже на псевдокласс CSS {{cssxref(':hover')}}.

    diff --git a/files/ru/web/api/element/mouseleave_event/index.html b/files/ru/web/api/element/mouseleave_event/index.html index 9db4d49b39..19b5e9dafb 100644 --- a/files/ru/web/api/element/mouseleave_event/index.html +++ b/files/ru/web/api/element/mouseleave_event/index.html @@ -88,7 +88,7 @@ translation_of: Web/API/Element/mouseleave_event currentTarget {{readonlyInline}} {{domxref("EventTarget")}} - Целевой узел (элемент), который используется слушателем события. + Целевой узел (элемент), который используется обработчиком события. relatedTarget {{readonlyInline}} diff --git a/files/ru/web/api/event/comparison_of_event_targets/index.html b/files/ru/web/api/event/comparison_of_event_targets/index.html index 0c05e9118f..2a6156a312 100644 --- a/files/ru/web/api/event/comparison_of_event_targets/index.html +++ b/files/ru/web/api/event/comparison_of_event_targets/index.html @@ -90,7 +90,7 @@ translation_of: Web/API/Event/Comparison_of_Event_Targets     <thead>         <tr>             <td class="standard">Изначальная цель, отправляющая событие <small>event.target</small></td> -            <td class="standard">Цель, кто прослушивает события <small>event.currentTarget</small></td> +            <td class="standard">Цель, кто обрабатывает события <small>event.currentTarget</small></td>             <td class="standard">Идентифицировать другой элемент (если он есть), участвующий в событии <small>event.relatedTarget</small></td>             <td class="non-standard">Если по какой-то причине произошло перенацеливание события <small>event.explicitOriginalTarget</small> содержит цель перед перенацеливанием (никогда не содержит анонимных целей)</td>             <td class="non-standard">Если по какой-то причине произошло перенацеливание события <small>event.originalTarget</small> содержит цель перед перенацеливанием (может содержать анонимные цели)</td> diff --git a/files/ru/web/api/event/stopimmediatepropagation/index.html b/files/ru/web/api/event/stopimmediatepropagation/index.html index 177bffde51..fd19d6a123 100644 --- a/files/ru/web/api/event/stopimmediatepropagation/index.html +++ b/files/ru/web/api/event/stopimmediatepropagation/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Event/stopImmediatePropagation ---

    {{APIRef("DOM")}}

    -

    Останавливает цепочку вызова событий для последующих слушателей DOM элемента.

    +

    Останавливает цепочку вызова событий для последующих обработчиков DOM элемента.

    Синтаксис

    @@ -24,7 +24,7 @@ translation_of: Web/API/Event/stopImmediatePropagation

    Замечания

    -

    Если несколько слушателей прикреплены к одному и тому же элементу с одинаковым типом события, тогда они будут вызваны в порядке своего добавления. Если один из этих слушателей вызовет event.stopImmediatePropagation() тогда события оставшихся слушателей вызваны не будут.

    +

    Если несколько обработчиков прикреплены к одному и тому же элементу с одинаковым типом события, тогда они будут вызваны в порядке своего добавления. Если один из этих обработчиков вызовет event.stopImmediatePropagation() тогда события оставшихся обработчиков вызваны не будут.

    Спецификация

    diff --git a/files/ru/web/api/eventsource/index.html b/files/ru/web/api/eventsource/index.html index fd25f85eb4..7c99a51bfc 100644 --- a/files/ru/web/api/eventsource/index.html +++ b/files/ru/web/api/eventsource/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/EventSource

    Интерфейс EventSource используется для получения серверных событий (Server-sent events). Он устанавливает соединение с сервером по HTTP и получает события в формате text/event-stream без закрытия соединения.

    -

    Вы можете присвоить атрибуту onmessage JavaScript-функцию для получения нетипизированных сообщений (то есть сообщений без поля event). Вы так же можете вызвать функцию addEventListener() для прослушивания событий так же, как для любого другого источника событий.

    +

    Вы можете присвоить атрибуту onmessage JavaScript-функцию для получения нетипизированных сообщений (то есть сообщений без поля event). Вы так же можете вызвать функцию addEventListener() для обработки событий так же, как для любого другого источника событий.

    См. Using server-sent events для более детальной информации 

    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.addEventListener(type, listener[, useCapture
    type
    -
    Чувствительная к регистру строка, представляющая тип прослушиваемого события.
    +
    Чувствительная к регистру строка, представляющая тип обрабатываемого события.
    listener
    Объект, который принимает уведомление, когда событие указанного типа произошло. Это должен быть объект, реализующий интерфейс {{domxref("EventListener")}} или просто функция JavaScript.
    @@ -36,20 +36,20 @@ target
    .addEventListener(type, listener[, useCaptureoptions {{optional_inline}}
    Объект options, который определяет характеристики объекта, прослушивающего событие. Доступны следующие варианты:
      -
    • capture:  {{jsxref("Boolean")}} указывает, что события этого типа будут отправлены зарегистрированному слушателю listener перед отправкой на EventTarget, расположенный ниже в дереве DOM.
    • -
    • once: {{jsxref("Boolean")}} указывает, что слушатель должен быть вызван не более одного раза после добавления. Если true, слушатель автоматически удаляется при вызове.
    • -
    • passive:  {{jsxref("Boolean")}} указывает, что слушатель никогда не вызовет preventDefault(). Если все же вызов будет произведен, браузер должен игнорировать его и генерировать консольное предупреждение. Пример {{anch("Улучшение производительности прокрутки с помощью passive true")}}
    • -
    • {{non-standard_inline}} mozSystemGroup: {{jsxref("Boolean")}} указывает, что слушатель должен быть добавлен в системную группу. Доступно только в коде, запущенном в XBL или в расширении Chrome.
    • +
    • capture:  {{jsxref("Boolean")}} указывает, что события этого типа будут отправлены зарегистрированному обработчику listener перед отправкой на EventTarget, расположенный ниже в дереве DOM.
    • +
    • once: {{jsxref("Boolean")}} указывает, что обработчик должен быть вызван не более одного раза после добавления. Если true, обработчик автоматически удаляется при вызове.
    • +
    • passive:  {{jsxref("Boolean")}} указывает, что обработчик никогда не вызовет preventDefault(). Если все же вызов будет произведен, браузер должен игнорировать его и генерировать консольное предупреждение. Пример {{anch("Улучшение производительности прокрутки с помощью passive true")}}
    • +
    • {{non-standard_inline}} mozSystemGroup: {{jsxref("Boolean")}} указывает, что обработчик должен быть добавлен в системную группу. Доступно только в коде, запущенном в XBL или в расширении Chrome.
    useCapture {{optional_inline}}
    -
    Если равно true, useCapture указывает, что пользователь желает начать захват. После инициализации захвата все события указанного типа будут отправлены в зарегистрированный listener перед отправкой в какой-либо EventTarget под ним в дереве DOM. События, восходящие вверх по дереву, не будут вызывать слушателей, которым назначено использовать захват. Смотрите DOM Level 3 Events для более детального объяснения. Значение useCapture по умолчанию равно false. -
    Note: Для прослушивателей событий прикреплённых к цели события, событие  находиться в целевой фазе, а не в фазах захвата или всплытия. События в целевой фазе инициируют все прослушиватели на элементе в том порядке, в котором они были зарегистрированы независимо от параметра useCapture.
    +
    Если равно true, useCapture указывает, что пользователь желает начать захват. После инициализации захвата все события указанного типа будут отправлены в зарегистрированный listener перед отправкой в какой-либо EventTarget под ним в дереве DOM. События, восходящие вверх по дереву, не будут вызывать обработчиков, которым назначено использовать захват. Смотрите DOM Level 3 Events для более детального объяснения. Значение useCapture по умолчанию равно false. +
    Note: Для обработчиков событий прикреплённых к цели события, событие  находиться в целевой фазе, а не в фазах захвата или всплытия. События в целевой фазе инициируют все обработчики на элементе в том порядке, в котором они были зарегистрированы независимо от параметра useCapture.
    Note: useCapture не всегда был опциональным. Лучше указывать данный параметр для повышения совместимости.
    wantsUntrusted {{Non-standard_inline}}
    -
    Если равно true, слушатель будет получать сгенерированные события, посланные со страницы (по умолчанию равно false для chrome и true для обычных веб-страниц). Этот параметр доступен только в Gecko и в основном полезен для использования в дополнениях и самом браузере. Смотрите Взаимодействие между привилегированными и непривилегированными страницами для примеров использования.
    +
    Если равно true, обработчик будет получать сгенерированные события, посланные со страницы (по умолчанию равно false для chrome и true для обычных веб-страниц). Этот параметр доступен только в Gecko и в основном полезен для использования в дополнениях и самом браузере. Смотрите Взаимодействие между привилегированными и непривилегированными страницами для примеров использования.

    Прежде чем использовать определенное значение в объекте options, рекомендуется убедиться, что браузер пользователя поддерживает его, поскольку это дополнение, которое не все браузеры поддерживали исторически.

    @@ -60,9 +60,9 @@ target
    .addEventListener(type, listener[, useCaptureПримечания по использованию -

    Обратный вызов прослушивателя событий

    +

    Обратный вызов обработчика событий

    -

    Прослушиватель событий может быть задан либо как функция обратного вызова, либо как объект реализующий {{domxref("EventListener")}}, чей {{domxref("EventListener.handleEvent", "handleEvent()")}} метод служит как функция обратного вызова.

    +

    Обработчик событий может быть задан либо как функция обратного вызова, либо как объект реализующий {{domxref("EventListener")}}, чей {{domxref("EventListener.handleEvent", "handleEvent()")}} метод служит как функция обратного вызова.

    Сама функция обратного вызова имеет те же параметры и возвращаемое значение что и метод handleEvent(); То есть обратный вызов принимает единственный параметр: объект основанный на {{domxref("Event")}} описывая событие, которое произошло и ничего не возвращая.

    @@ -78,7 +78,7 @@ target
    .addEventListener(type, listener[, useCaptureБезопасная проверка поддержки option -

    В более старых версиях спецификации DOM третьим параметром addEventListener было логическое значение, указывающее, следует ли захватывать событие на этапе погружения. Со временем стало ясно, что необходимо больше вариантов. Вместо добавления дополнительных параметров в функцию (усложняя ситуацию при использовании необязательных значений) третий параметр был изменен на объект, который может содержать различные свойства, определяющие значения параметров для настройки слушателя событий.

    +

    В более старых версиях спецификации DOM третьим параметром addEventListener было логическое значение, указывающее, следует ли захватывать событие на этапе погружения. Со временем стало ясно, что необходимо больше вариантов. Вместо добавления дополнительных параметров в функцию (усложняя ситуацию при использовании необязательных значений) третий параметр был изменен на объект, который может содержать различные свойства, определяющие значения параметров для настройки обработчика событий.

    Поскольку старые браузеры (а также некоторые не слишком старые браузеры) по-прежнему предполагают, что третий параметр является логическим, возникает необходимость создания своего кода, чтобы разумно обрабатывать этот сценарий. Вы можете сделать это, используя функцию обнаружения для каждого из интересующих вас параметров.

    @@ -100,12 +100,12 @@ try {

    Для проверки поддержки использования какой-либо опции можно просто добавить геттер для нее, используя код, подобный тому, что показан выше.

    -

    Если вы хотите добавить прослушиватель событий, использующий параметры, о которых идет речь, вы можете сделать это подобным образом:

    +

    Если вы хотите добавить обработчик событий, использующий параметры, о которых идет речь, вы можете сделать это подобным образом:

    someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
                                    ? { passive: true } : false);
    -

    Здесь мы добавляем слушателя для события {{event ("mouseup")}} элемента someElement. Для третьего параметра, если passiveSupported имеет значение true, мы указываем объект options с passive: true; в противном случае мы знаем, что нам нужно передать логическое значение, и мы передаем false как значение параметра useCapture.

    +

    Здесь мы добавляем обработчик события {{event ("mouseup")}} элемента someElement. Для третьего параметра, если passiveSupported имеет значение true, мы указываем объект options с passive: true; в противном случае мы знаем, что нам нужно передать логическое значение, и мы передаем false как значение параметра useCapture.

    Вы можете использовать стороннюю библиотеку, такую как Modernizr или Detect It, чтобы проверить поддержку необходимого свойства.

    @@ -113,7 +113,7 @@ try {

    Примеры

    -

    Добавление простого слушателя

    +

    Добавление простого обработчика

    Эти примеры демонстрируют как использовать addEventListener() для наблюдения за щелчками мышкой по элементу.

    @@ -137,18 +137,18 @@ function modifyText() { } } -// Добавляет слушателя событий для таблицы +// Добавляет обработчика событий для таблицы var el = document.getElementById("outside"); el.addEventListener("click", modifyText, false); -

    В примере выше, modifyText() регистрирует слушателя для события click, используя addEventListener(). Клик в любом месте таблицы будет поднимать обработчик и запускать modifyText().

    +

    В примере выше, modifyText() регистрирует обработчика для события click, используя addEventListener(). Клик в любом месте таблицы будет поднимать обработчик и запускать modifyText().

    Результат

    {{EmbedLiveSample('Add_a_simple_listener')}}

    -

    Если вам нужно передать параметры в слушателя, вы можете использовать анонимные функции.

    +

    Если вам нужно передать параметры в обработчик, вы можете использовать анонимные функции.

    Слушатель события с анонимной функцией

    @@ -167,7 +167,7 @@ function modifyText(new_text) {   t2.firstChild.nodeValue = new_text; } -// Функция, добавляющая слушатель к таблице +// Функция, добавляющая обработчик к таблице el = document.getElementById("outside"); el.addEventListener("click", function(){modifyText("четыре")}, false); @@ -219,13 +219,13 @@ el.addEventListener("click", () => { modifyText("four"); }, false);

    Ниже описан другой, более старый способ регистрации обработчиков.

    -

    Добавление слушателя во время обработки события

    +

    Добавление обработчика во время обработки события

    Если EventListener добавлен к EventTarget во время обработки события, он не будет вызван текущими действиями, но может быть вызван на более поздней стадии обработки события, при восходящей обработке.

    -

    Несколько одинаковых слушателей события

    +

    Несколько одинаковых обработчиков события

    -

    Если зарегистрировано несколько одинаковых EventListener на одном EventTarget с одинаковыми параметрами, дублирующиеся слушатели игнорируются. Так как одинаковые слушатели игнорируются, не требуется удалять их вручную с помощью метода removeEventListener.

    +

    Если зарегистрировано несколько одинаковых EventListener на одном EventTarget с одинаковыми параметрами, дублирующиеся обработчики игнорируются. Так как одинаковые обработчики игнорируются, не требуется удалять их вручную с помощью метода removeEventListener.

    Значение this в обработчике

    @@ -239,7 +239,7 @@ el.addEventListener("click", () => { modifyText("four"); }, false);

    Значение переменной this внутри modifyText() при вызове событием клика будет равно ссылке на глобальный (window) объект (или undefined при использовании strict mode)

    -
    Note: В JavaScript 1.8.5 введён метод Function.prototype.bind() , который позволяет указать значение, которое должно быть использовано для всех вызовов данной функции. Он позволяет вам легко обходить ситуации, в которых не ясно, чему будет равно this, в зависимости от того, в каком контексте будет вызвана ваша функция. заметьте, также, что Вам будет необходимо иметь внешнюю ссылку на слушатель, чтобы Вы могли удалить его позже.
    +
    Note: В JavaScript 1.8.5 введён метод Function.prototype.bind() , который позволяет указать значение, которое должно быть использовано для всех вызовов данной функции. Он позволяет вам легко обходить ситуации, в которых не ясно, чему будет равно this, в зависимости от того, в каком контексте будет вызвана ваша функция. заметьте, также, что Вам будет необходимо иметь внешнюю ссылку на обработчик, чтобы Вы могли удалить его позже.

    Пример с использованием bind и без него:

    @@ -256,7 +256,7 @@ el.addEventListener("click", () => { modifyText("four"); }, false); } -

    Проблема в примере выше заключается в том, что Вы не можете удалить слушатель, вызванный с bind. Другое решение использует специальную функцию handleEvent, чтобы перехватывать любые события:

    +

    Проблема в примере выше заключается в том, что Вы не можете удалить обработчик, вызванный с bind. Другое решение использует специальную функцию handleEvent, чтобы перехватывать любые события:

    var Something = function(element) {
       this.name = 'Something Good';
    @@ -272,11 +272,11 @@ el.addEventListener("click", () => { modifyText("four"); }, false);
    } }; - // В этом случае слушатели хранятся в 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);

    Старый способ регистрации обработчиков событий

    -

    addEventListener() был добавлен в спецификации DOM 2 Events. До этого слушатели добавлялись следующим образом:

    +

    addEventListener() был добавлен в спецификации DOM 2 Events. До этого обработчики добавлялись следующим образом:

    // Передача ссылки на функцию — не добавляйте '()' после него, это вызовет функцию!
     el.onclick = modifyText;
    @@ -391,7 +391,7 @@ element.onclick = function() {
     
     

    Этот метод заменяет текущие слушатели события click, если они есть. Тоже самое для других событий и ассоциируемых с ними  обработчиков, таких как blur (onblur), keypress (onkeypress), и так далее.

    -

    Так как это по существу было частью DOM 0, этот метод имеет широкую поддержку и не требует специального кросс-браузерного кода; следовательно, это обычно используется, чтобы добавлять слушатели динамически, если не требуются расширенные возможности addEventListener().

    +

    Так как это по существу было частью DOM 0, этот метод имеет широкую поддержку и не требует специального кросс-браузерного кода; следовательно, это обычно используется, чтобы добавлять обработчики динамически, если не требуются расширенные возможности addEventListener().

    Вопросы памяти

    @@ -418,7 +418,7 @@ for(i=0 ; i<els.length ; i++){

    Улучшение производительности прокрутки с помощью passive: true

    -

    Значение по умолчанию для параметра passive - false. Начиная с Chrome 56 (desktop, Chrome for Android, Android webview) значение по умолчанию для {{event("touchstart")}} и {{event("touchmove")}} равно true, а вызовы preventDefault() не разрешены. Чтобы отменить это поведение, необходимо установить параметр passive в false (см. пример ниже). Это изменение не позволяет слушателю блокировать показ страницы во время прокрутки пользователя. Демонстрация доступна на сайте разработчиков Google. Обратите внимание, что Edge вообще не поддерживает options, и добавление его без проверки поддержки помешает использовать аргумент useCapture.

    +

    Значение по умолчанию для параметра passive - false. Начиная с Chrome 56 (desktop, Chrome for Android, Android webview) значение по умолчанию для {{event("touchstart")}} и {{event("touchmove")}} равно true, а вызовы preventDefault() не разрешены. Чтобы отменить это поведение, необходимо установить параметр passive в false (см. пример ниже). Это изменение не позволяет обработчику блокировать показ страницы во время прокрутки пользователя. Демонстрация доступна на сайте разработчиков Google. Обратите внимание, что Edge вообще не поддерживает options, и добавление его без проверки поддержки помешает использовать аргумент useCapture.

    /* Feature detection */
     var passiveSupported = false;
    @@ -437,7 +437,7 @@ elem.addEventListener(
         passiveSupported ? { passive: true } : false
     );
    -

    Установка passive не имеет значения для основного события {{event ("scroll")}}, поскольку его нельзя отменить, поэтому его слушатель в любом случае не может блокировать показ страницы.

    +

    Установка passive не имеет значения для основного события {{event ("scroll")}}, поскольку его нельзя отменить, поэтому его обработчик в любом случае не может блокировать показ страницы.

    Совместимость

    diff --git a/files/ru/web/api/globaleventhandlers/oninput/index.html b/files/ru/web/api/globaleventhandlers/oninput/index.html index 7da5c5e43b..0d8a45263a 100644 --- a/files/ru/web/api/globaleventhandlers/oninput/index.html +++ b/files/ru/web/api/globaleventhandlers/oninput/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/GlobalEventHandlers/oninput ---
    {{ApiRef("HTML DOM")}}
    -

    Обработчик события для input event в окне. Событие ввода возникает при изменении значения элемента {{HTMLElement ("input")}}.
    +

    Обработчик события input в окне. Событие ввода возникает при изменении значения элемента {{HTMLElement ("input")}}.

    Это событие пузырится. Если он поддерживается в окне, он поддерживается и в {{HTMLElement ("input")}}.

    diff --git a/files/ru/web/api/html_drag_and_drop_api/drag_operations/index.html b/files/ru/web/api/html_drag_and_drop_api/drag_operations/index.html index 1b8cf0c387..0ebd022362 100644 --- a/files/ru/web/api/html_drag_and_drop_api/drag_operations/index.html +++ b/files/ru/web/api/html_drag_and_drop_api/drag_operations/index.html @@ -20,8 +20,8 @@ original_slug: Web/Guide/HTML/Drag_and_drop/Drag_operations
    1. Установить {{htmlattrxref("draggable")}}="true" на элемент, который вы хотите сделать перетаскиваемым.
    2. -
    3. Добавить слушатель события {{event("dragstart")}}.
    4. -
    5. Установить данные перетаскивания в слушатель выше.
    6. +
    7. Добавить обработчик события {{event("dragstart")}}.
    8. +
    9. Установить данные перетаскивания в обработчик выше.

    Вот пример, который позволяет перетаскивать часть содержимого.

    @@ -41,7 +41,7 @@ original_slug: Web/Guide/HTML/Drag_and_drop/Drag_operations

    Начало операции перетаскивания

    -

    В примере, слушатель добавлен для события {{event("dragstart")}} с использованием атрибута{{domxref("GlobalEventHandlers.ondragstart","ondragstart")}}.

    +

    В примере, обработчик добавлен для события {{event("dragstart")}} с использованием атрибута{{domxref("GlobalEventHandlers.ondragstart","ondragstart")}}.

    <p draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
       This text <strong>may</strong> be dragged.
    @@ -50,7 +50,7 @@ original_slug: Web/Guide/HTML/Drag_and_drop/Drag_operations
     
     

    Когда пользователь начинает перетаскивание, запускается событие {{event("dragstart")}}.

    -

    В этом примере слушатель {{event("dragstart")}} добавлен к самому перемещаемом элементу. Однако, вы можете слушать более высокого предка, так как событие перетаскивание всплывает вверх как и большинство событий.

    +

    В этом примере обработчик {{event("dragstart")}} добавлен к самому перемещаемом элементу. Однако, вы можете слушать более высокого предка, так как событие перетаскивание всплывает вверх как и большинство событий.

    Внутри события {{event("dragstart")}}, вы можете указать drag данные, изображение отклика, drag-эффекты, все это описано ниже. Однако, обязательны только drag данные. (Изображение и drag-эффекты по умолчанию, подходят в большинстве ситуаций)

    @@ -60,7 +60,7 @@ original_slug: Web/Guide/HTML/Drag_and_drop/Drag_operations

    Когда происходит перетаскивание, данные должны быть связаны с перетаскиванием, которое определяет, что перетаскивается. Например, при перетаскивании выделенного текста в текстовое поле данные, связанные с элементом данных перетаскивания, являются самим текстом. Аналогично, при перетаскивании ссылки на веб-странице элемент данных перетаскивания является URL-адресом ссылки.

    -

    {{domxref("DataTransfer","drag data")}} содержит два параметра, тип (или формат) данных, и значение данных. Формат это строковый тип (такой как text/plain текстовых данных), значение - строка текста. Когда начинается перетаскивание, вы добавляете данные, предоставляя тип и данные. Во время перетаскивания в слушателе события для событий {{event("dragenter")}} и {{event("dragover")}} , вы используете типы данных перетаскиваемых данных, чтобы проверить, разрешено ли удаление. Например, цель drop, которая принимает ссылки, будет проверять тип text/uri-list. В течение события drop, слушатель будет получать данные тащат и вставить его на место.

    +

    {{domxref("DataTransfer","drag data")}} содержит два параметра, тип (или формат) данных, и значение данных. Формат это строковый тип (такой как text/plain текстовых данных), значение - строка текста. Когда начинается перетаскивание, вы добавляете данные, предоставляя тип и данные. Во время перетаскивания в обработчике события для событий {{event("dragenter")}} и {{event("dragover")}} , вы используете типы данных перетаскиваемых данных, чтобы проверить, разрешено ли удаление. Например, цель drop, которая принимает ссылки, будет проверять тип text/uri-list. В течение события drop, обработчик будет получать данные тащат и вставить его на место.

    Свойство {{domxref("DataTransfer","drag data's")}} {{domxref("DataTransfer.types","types")}} возвращает список MIME-типов {{domxref("DOMString")}}, таких как text/plain или image/jpeg. Вы также можете создавать свои собственные типы. Большинство основные используемых типов описаны в  Recommended Drag Types.

    @@ -131,7 +131,7 @@ dt.setData("text/plain", "https://www.mozilla.org");

    При перетаскивании можно выполнить несколько операций. Операция  copy используется для указания на то, что перетаскиваемые данные будут скопированы из текущего местоположения в место перетаскивания. Операция move используется для указания на то, что перетаскиваемые данные будут перемещены, а операция link используется для указания на то, что между исходным и удаляемым местоположениями будет создана некоторая форма связи или соединения.

    -

    Вы можете указать, какая из трех операций разрешена для источника перетаскивания, установив свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}} в слушателе событий{{event("dragstart")}}.

    +

    Вы можете указать, какая из трех операций разрешена для источника перетаскивания, установив свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}} в обработчике событий{{event("dragstart")}}.

    event.dataTransfer.effectAllowed = "copy";
     
    @@ -163,7 +163,7 @@ dt.setData("text/plain", "https://www.mozilla.org");

    Обратите внимание, что эти значения должны использоваться так, как указано выше. Например, установка свойства {{domxref("DataTransfer.effectAllowed","effectAllowed")}} на copyMove позволяет выполнять операцию копирования или перемещения, но не позволяет пользователю выполнять операцию связывания. Если вы не измените свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}},  то любая операция разрешена, как и со значением 'all'. Поэтому вам не нужно настраивать это свойство, если вы не хотите исключить определенные типы.

    -

    Во время операции перетаскивания, слушатель для событий {{event("dragenter")}} или {{event("dragover")}} может проверить свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}} , какие операции разрешены. Связанное свойство,  {{domxref("DataTransfer.dropEffect","dropEffect")}}, должно быть установлено в пределах одного из этих событий, чтобы указать, какая единственная операция должна быть выполнена. Допустимые значения для {{domxref("DataTransfer.dropEffect","dropEffect")}} - none, copy, move, или link. Комбинированные значения для этого свойства не используются.

    +

    Во время операции перетаскивания, обработчик для событий {{event("dragenter")}} или {{event("dragover")}} может проверить свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}} , какие операции разрешены. Связанное свойство,  {{domxref("DataTransfer.dropEffect","dropEffect")}}, должно быть установлено в пределах одного из этих событий, чтобы указать, какая единственная операция должна быть выполнена. Допустимые значения для {{domxref("DataTransfer.dropEffect","dropEffect")}} - none, copy, move, или link. Комбинированные значения для этого свойства не используются.

    С событиями {{event("dragenter")}} и {{event("dragover")}}, свойство {{domxref("DataTransfer.dropEffect","dropEffect")}} инициализируется в соответствии с запросом пользователя. Пользователь может изменить желаемый эффект, нажав клавиши-модификаторы. Хотя точные используемые клавиши различаются в зависимости от платформы, обычно клавиши  Shift и Control используются для переключения между копированием, перемещением и связыванием. Указатель мыши изменится, чтобы указать, какая операция требуется. Например, для copy курсор может появиться со знаком плюс рядом с ним.

    @@ -182,7 +182,7 @@ dt.setData("text/plain", "https://www.mozilla.org");

    Слушатель для событий {{event("dragenter")}} и {{event("dragover")}} используются для указания допустимых drop-целей, то есть мест, где могут быть сброшены перетаскиваемые элементы. Большинство областей веб-страницы или приложения не являются допустимыми местами для сброса данных. Таким образом, обработка этих событий по умолчанию не допускает сброса перетаскиваемых данных.

    -

    Если вы хотите разрешить сброс переносимых данных, вы должны предотвратить обработку по умолчанию, отменив оба события dragenter и dragover.  Это можно сделать, либо вернув false из определенных атрибутом слушателя событий, либо вызвав метод {{domxref("Event.preventDefault","preventDefault()")}} событие. Последнее может быть более осуществимо в функции, определенной в отдельном скрипте.

    +

    Если вы хотите разрешить сброс переносимых данных, вы должны предотвратить обработку по умолчанию, отменив оба события dragenter и dragover.  Это можно сделать, либо вернув false из определенных атрибутом обработчика событий, либо вызвав метод {{domxref("Event.preventDefault","preventDefault()")}} событие. Последнее может быть более осуществимо в функции, определенной в отдельном скрипте.

    <div ondragover="return false">
     <div ondragover="event.preventDefault()">
    diff --git a/files/ru/web/api/htmlelement/pointerover_event/index.html b/files/ru/web/api/htmlelement/pointerover_event/index.html
    index cd2ca5ef5c..09db1385a6 100644
    --- a/files/ru/web/api/htmlelement/pointerover_event/index.html
    +++ b/files/ru/web/api/htmlelement/pointerover_event/index.html
    @@ -5,7 +5,7 @@ translation_of: Web/API/HTMLElement/pointerover_event
     ---
     
    {{APIRef}}
    -

    Событие pointerover когда указатель входит в границы элемента слушающего события.

    +

    Событие pointerover когда указатель входит в границы элемента обрабатываемого события.

    diff --git a/files/ru/web/api/htmlelement/transitionend_event/index.html b/files/ru/web/api/htmlelement/transitionend_event/index.html index 898af024d0..697806203f 100644 --- a/files/ru/web/api/htmlelement/transitionend_event/index.html +++ b/files/ru/web/api/htmlelement/transitionend_event/index.html @@ -75,7 +75,7 @@ original_slug: Web/Events/transitionend

    Пример

    /*
    - * Прослушивать событие transitionend на определенном элементе, т.е. #slidingMenu
    + * Обрабатывать событие transitionend на определенном элементе, т.е. #slidingMenu
      * Затем, вызвать определенную функцию, т.е. showMessage()
      */
     function showMessage() {
    diff --git a/files/ru/web/api/htmlmediaelement/index.html b/files/ru/web/api/htmlmediaelement/index.html
    index f5524d3040..9bd4e1feca 100644
    --- a/files/ru/web/api/htmlmediaelement/index.html
    +++ b/files/ru/web/api/htmlmediaelement/index.html
    @@ -186,7 +186,7 @@ translation_of: Web/API/HTMLMediaElement
     
     

    События 

    -

    Наследует методы от своего родителя {{domxref ("HTMLElement")}}, определенного в миксине {{domxref ('GlobalEventHandlers')}}. Прослушайте эти события, используя addEventListener () или назначив прослушиватель событий свойству oneventname этого интерфейса.

    +

    Наследует методы от своего родителя {{domxref ("HTMLElement")}}, определенного в миксине {{domxref ('GlobalEventHandlers')}}. Обработайте эти события, используя addEventListener () или назначив обработчик событий свойству oneventname этого интерфейса.

    {{domxref("HTMLMediaElement.abort_event", 'abort')}}
    diff --git a/files/ru/web/api/indexeddb_api/using_indexeddb/index.html b/files/ru/web/api/indexeddb_api/using_indexeddb/index.html index 7a60703eb9..824a0372d0 100644 --- a/files/ru/web/api/indexeddb_api/using_indexeddb/index.html +++ b/files/ru/web/api/indexeddb_api/using_indexeddb/index.html @@ -25,7 +25,7 @@ translation_of: Web/API/IndexedDB_API/Using_IndexedDB
  • Создать хранилище объектов в базе данных, над которой будут выполняться наши операции. 
  • Запустить транзакцию и выдать запрос на выполнение какой-либо операции с базой данных, например, добавление или извлечение данных.
  • -
    Ждать завершения операции, "слушая" событие DOM, на которое должен быть установлен наш обработчик.
    +
    Ждать завершения операции, обрабатывая событие DOM, на которое должен быть установлен наш обработчик.
  • Сделать что-то с результатами (которые могут быть найдены в возвращаемом по нашему запросу объекте ).
    diff --git a/files/ru/web/api/navigatoronline/online/index.html b/files/ru/web/api/navigatoronline/online/index.html index afb1f8380b..1620695b45 100644 --- a/files/ru/web/api/navigatoronline/online/index.html +++ b/files/ru/web/api/navigatoronline/online/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/NavigatorOnLine/onLine

    В Firefox и Internet Explorer, переключение браузера в автономный режим посылает false значение. Во всех остальных случаях возвращается значение true.

    -

    Вы можете увидеть изменения в состоянии сети путем прослушивания событий window.ononline и window.onoffline.

    +

    Вы можете увидеть изменения в состоянии сети путем обработки событий window.ononline и window.onoffline.

    Синтаксис

    @@ -38,7 +38,7 @@ translation_of: Web/API/NavigatorOnLine/onLine

    Если браузер не поддерживает navigator.onLine в примере выше, то всегда будет false/undefined.

    -

    Чтобы увидеть изменения в состоянии сети, используйте addEventListener для прослушивания событий window.ononline и window.onoffline, как показано в примере:

    +

    Чтобы увидеть изменения в состоянии сети, используйте addEventListener для обработки событий window.ononline и window.onoffline, как показано в примере:

    window.addEventListener("offline", function(e) {alert("offline");})
     
    diff --git a/files/ru/web/api/rtcpeerconnection/index.html b/files/ru/web/api/rtcpeerconnection/index.html
    index b0b1f6c165..5103da41dc 100644
    --- a/files/ru/web/api/rtcpeerconnection/index.html
    +++ b/files/ru/web/api/rtcpeerconnection/index.html
    @@ -22,7 +22,7 @@ translation_of: Web/API/RTCPeerConnection
     
     

    События 

    -

    Для прослушивания событий используется функция добавления обработчика события {{domxref("EventTarget.addEventListener", "addEventListener()")}} или используется стандартное свойство интерфейса по схеме  onимясобытия (префикс on к которому добавляется имя события прописными буквами) для установки обработчика события.

    +

    Для обработки событий используется функция добавления обработчика события {{domxref("EventTarget.addEventListener", "addEventListener()")}} или используется стандартное свойство интерфейса по схеме  onимясобытия (префикс on к которому добавляется имя события прописными буквами) для установки обработчика события.

    {{domxref("RTCPeerConnection.connectionstatechange_event", "connectionstatechange")}}
    diff --git a/files/ru/web/api/server-sent_events/using_server-sent_events/index.html b/files/ru/web/api/server-sent_events/using_server-sent_events/index.html index dc94c72a33..0bc2834743 100644 --- a/files/ru/web/api/server-sent_events/using_server-sent_events/index.html +++ b/files/ru/web/api/server-sent_events/using_server-sent_events/index.html @@ -20,7 +20,7 @@ translation_of: Web/API/Server-sent_events/Using_server-sent_events
    const evtSource = new EventSource("//api.example.com/ssedemo.php", { withCredentials: true } ); 
     
    -

    Как только вы создали экземпляр EventSource, вы можете начать прослушивание сообщений с сервера, добавив обработчик для события {{event("message")}} :

    +

    Как только вы создали экземпляр EventSource, вы можете начать получать сообщения с сервера, добавив обработчик события {{event("message")}} :

    evtSource.onmessage = function(event) {
       const newElement = document.createElement("li");
    @@ -31,9 +31,9 @@ translation_of: Web/API/Server-sent_events/Using_server-sent_events
     }
     
    -

    Этот код прослушивает входящие сообщения (то есть уведомления от сервера, на которых нет поля event) и добавляет текст сообщения в список в HTML-документе.

    +

    Этот код обрабатывает входящие сообщения (то есть уведомления от сервера, на которых нет поля event) и добавляет текст сообщения в список в HTML-документе.

    -

    Вы также можете прослушивать события, используя addEventListener():

    +

    Вы также можете обрабатывать события, используя addEventListener():

    evtSource.addEventListener("ping", function(event) {
       const newElement = document.createElement("li");
    @@ -114,7 +114,7 @@ while (1) {
     
     
    event
    -
    Строка, идентифицирующая тип описанного события. Если event указан, то событие будет отправлено в браузер слушателю для указанного имени события. Исходный код сайта должен использовать addEventListener() для прослушивания именованных событий. Обработчик onmessage вызывается, если для сообщения не указано имя события.
    +
    Строка, идентифицирующая тип описанного события. Если event указан, то событие будет отправлено в браузер обработчику указанного имени события. Исходный код сайта должен использовать addEventListener() для обработки именованных событий. Обработчик onmessage вызывается, если для сообщения не указано имя события.
    data
    Поле данных для сообщения. Когда EventSource получает несколько последовательных строк, начинающихся с data:, он объединяет их, вставляя символ новой строки между каждой из них. Последние переводы строки удаляются.
    id
    diff --git a/files/ru/web/api/sharedworker/index.html b/files/ru/web/api/sharedworker/index.html index a8d9b92990..7e2b91c3c7 100644 --- a/files/ru/web/api/sharedworker/index.html +++ b/files/ru/web/api/sharedworker/index.html @@ -46,7 +46,7 @@ translation_of: Web/API/SharedWorker
    var myWorker = new SharedWorker("worker.js");
     
    -

    далее скрипты получают доступ к воркеру через объект {{domxref("MessagePort")}}, находящийся в свойстве {{domxref("SharedWorker.port")}}. Если устанавливается хэндлер события onmessage, port самостоятельно начинает работу, вызывая собственный метод start(), если же принимать события с помощью слушателя события  "message" через addEventListener, необходимо вызвать метод start() самостоятельно:

    +

    далее скрипты получают доступ к воркеру через объект {{domxref("MessagePort")}}, находящийся в свойстве {{domxref("SharedWorker.port")}}. Если устанавливается обработчик события onmessage, port самостоятельно начинает работу, вызывая собственный метод start(), если же принимать события с помощью обработчика события  "message" через addEventListener, необходимо вызвать метод start() самостоятельно:

    myWorker.port.start();
    diff --git a/files/ru/web/api/speechrecognition/index.html b/files/ru/web/api/speechrecognition/index.html index 7fe68eb613..8331ae2e91 100644 --- a/files/ru/web/api/speechrecognition/index.html +++ b/files/ru/web/api/speechrecognition/index.html @@ -57,7 +57,7 @@ translation_of: Web/API/SpeechRecognition
    {{domxref("SpeechRecognition.onspeechend")}}
    Вызывается, когда прекращается обнаружение речи, распознанной службой распознавания речи.
    {{domxref("SpeechRecognition.onstart")}}
    -
    Вызывается, когда служба распознавания речи начинает прослушивать входящий звук с намерением распознать грамматики, связанные с текущим распознаванием речи.
    +
    Вызывается, когда служба распознавания речи начинает обрабатывать входящий звук с намерением распознать грамматики, связанные с текущим распознаванием речи.

    Методы

    @@ -66,11 +66,11 @@ translation_of: Web/API/SpeechRecognition
    {{domxref("SpeechRecognition.abort()")}}
    -
    Прекращает службу распознавания речи от прослушивания входящего аудио и не пытается вернуть {{domxref("SpeechRecognitionResult")}}.
    +
    Останавливает обработку входящего аудио службой распознавания речи и не пытается вернуть {{domxref("SpeechRecognitionResult")}}.
    {{domxref("SpeechRecognition.start()")}}
    Запускает службу распознавания речи, прослушивая входящее аудио с целью распознавания грамматик, связанных с текущим распознаванием речи.
    {{domxref("SpeechRecognition.stop()")}}
    -
    Прекращает службу распознавания речи от прослушивания входящего аудио и пытается вернуть{{domxref("SpeechRecognitionResult")}} Используя уже записанный звук.
    +
    Останавливает обработку входящего аудио службой распознавания речи и пытается вернуть {{domxref("SpeechRecognitionResult")}} Используя уже записанный звук.

    Примеры

    diff --git a/files/ru/web/api/window/beforeunload_event/index.html b/files/ru/web/api/window/beforeunload_event/index.html index 4826f98d71..1273c5de18 100644 --- a/files/ru/web/api/window/beforeunload_event/index.html +++ b/files/ru/web/api/window/beforeunload_event/index.html @@ -43,7 +43,7 @@ translation_of: Web/API/Window/beforeunload_event

    Для борьбы с нежелательными всплывающими окнами браузеры могут не отображать подсказки, созданные в обработчиках событий beforeunload, за исключением случаев, когда страница была обработана или даже не отображается вообще.

    -

    Прикрепление обработчика/слушателя событий к window или document's beforeunload событие не позволяет браузерам использовать кэш навигации по страницам в памяти, наподобие Firefox's Back-Forward cache or WebKit's Page Cache.

    +

    Прикрепление обработчика событий к window или document beforeunload событие не позволяет браузерам использовать кэш навигации по страницам в памяти, наподобие Firefox's Back-Forward cache or WebKit's Page Cache.

    В спецификации HTML указано, что вызовы {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, и {{domxref("window.prompt()")}} методы могут быть проигнорированы во время этого события. Посмотреть HTML specification для более подробной информации.

    diff --git a/files/ru/web/api/window/index.html b/files/ru/web/api/window/index.html index 85133473dc..702534c6c7 100644 --- a/files/ru/web/api/window/index.html +++ b/files/ru/web/api/window/index.html @@ -233,7 +233,7 @@ translation_of: Web/API/Window
    {{domxref("Window.releaseEvents()")}} {{Deprecated_inline}}
    Возвращает окно с захваченных событий определенного типа.
    {{domxref("element.removeEventListener","Window.removeEventListener()")}}
    -
    Удаляет слушателя события из окна.
    +
    Удаляет обработчик события из окна.
    {{domxref("Window.requestIdleCallback()")}}  {{experimental_inline}}
    Позволяет назначить расписание задачи во время периода простоя браузера.
    {{domxref("Window.resizeBy()")}}
    @@ -290,7 +290,7 @@ translation_of: Web/API/Window
    {{domxref("WindowOrWorkerGlobalScope.fetch()")}}
    Начинает процесс загрузки ресурса из сети.
    {{domxref("EventTarget.removeEventListener")}}
    -
    Удаляет слушателя события из окна.
    +
    Удаляет обработчик события из окна.
    {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}
    Устанавливает расписание для исполнения функции каждый раз через заданное число миллисекунд.
    {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}
    diff --git a/files/ru/web/api/window/postmessage/index.html b/files/ru/web/api/window/postmessage/index.html index 7d1eaa8773..d6db0cff3a 100644 --- a/files/ru/web/api/window/postmessage/index.html +++ b/files/ru/web/api/window/postmessage/index.html @@ -26,7 +26,7 @@ translation_of: Web/API/Window/postMessage

    The dispatched event

    -

    В otherWindow отправляемые сообщения могут быть прослушаны следующим способом:

    +

    В otherWindow отправляемые сообщения могут быть обработаны следующим способом:

    window.addEventListener("message", receiveMessage, false);
     
    @@ -52,7 +52,7 @@ function receiveMessage(event)
     
     

    Вопросы безопасности

    -

    Если вы не ожидаете получения сообщения от других сайтов, не добавляйте никаких слушателей для message событий. Это гарантированный способ избежать проблем с безопасностью.

    +

    Если вы не ожидаете получения сообщения от других сайтов, не добавляйте обработчики событий message. Это гарантированный способ избежать проблем с безопасностью.

    Если же вы хотите получать сообщения от других сайтов, то всегда необходимо идентифицировать отправителя, используя origin и возможно source свойства. Любой сайт (включая, например, http://evil.example.com) может отправлять сообщения любым другим, и у вас нет гарантии, что неизвестный отправитель не пошлет вредоносные сообщения. Однако даже если отправитель известен, вам все равно необходимо всегда подтверждать синтаксис получаемого сообщения. Иначе, дыра в безопасности сайта, которому вы доверяете, может открыть дыру для межсайтового скриптинга на вашем сайте.

    diff --git a/files/ru/web/api/xmlhttprequest/index.html b/files/ru/web/api/xmlhttprequest/index.html index 2d5eb61469..c880307d7d 100644 --- a/files/ru/web/api/xmlhttprequest/index.html +++ b/files/ru/web/api/xmlhttprequest/index.html @@ -431,7 +431,7 @@ translation_of: Web/API/XMLHttpRequest

    Если запрос синхронный, то метод вернет значение только после того, как придет запрос от сервера.

    -
    Примечание: все необходимые слушатели событий (event listeners) должны быть установлены перед вызовом send().
    +
    Примечание: все необходимые обработчики событий должны быть установлены перед вызовом send().
    Примечание: Лучше не использовать параметр ArrayBuffer. Сейчас он не входит в спецификацию XMLHttpRequest. Вместо него можно использовать ArrayBufferView (смотри таблицу совместимости для различных версий).
    diff --git a/files/ru/web/css/media_queries/testing_media_queries/index.html b/files/ru/web/css/media_queries/testing_media_queries/index.html index ad52c96772..e986e6c13f 100644 --- a/files/ru/web/css/media_queries/testing_media_queries/index.html +++ b/files/ru/web/css/media_queries/testing_media_queries/index.html @@ -33,16 +33,16 @@ original_slug: Web/CSS/Media_Queries/Тестирование_медиа_зап

    Получение уведомлений о запросах

    -

    Если вам необходимо постоянно следить за изменениями в результате запроса, эффективнее зарегистрировать слушатель, чем вытаскивать результат запросов.  Для этого вызовите метод addListener() объекта {{domxref("MediaQueryList") }} с функцией обратного вызова, которая вызывается при изменении статуса медиа-запроса (например, тест медиа-запроса переходит от true к false):

    +

    Если вам необходимо постоянно следить за изменениями в результате запроса, эффективнее зарегистрировать обработчик, чем вытаскивать результат запросов.  Для этого вызовите метод addListener() объекта {{domxref("MediaQueryList") }} с функцией обратного вызова, которая вызывается при изменении статуса медиа-запроса (например, тест медиа-запроса переходит от true к false):

    var mediaQueryList = window.matchMedia("(orientation: portrait)"); // Создание списка запросов.
    -function handleOrientationChange(mql) { ... } // Определение функции обратного вызова для слушателя событий.
    -mediaQueryList.addListener(handleOrientationChange); // Добавление функции обратного вызова в качестве слушателя к списку запросов.
    +function handleOrientationChange(mql) { ... } // Определение функции обратного вызова для обработчика событий.
    +mediaQueryList.addListener(handleOrientationChange); // Добавление функции обратного вызова в качестве обработчика к списку запросов.
     
     handleOrientationChange(mediaQueryList); // Запуск обработчика изменений, один раз.
     
    -

    Этот код создает список медиа-запросов для тестирование ориентации, а затем добавляет к нему слушатель событий. После добавления слушателя, мы, также, непосредственно вызываем слушателя. Это заставляет нашего слушателя выполнять настройки, основываясь на текущей ориентации устройства; в противном случае, наш код может предполагать, что устройство находится в книжной ориентации при запуске, даже если оно фактически находится в альбомном положении.

    +

    Этот код создает список медиа-запросов для тестирование ориентации, а затем добавляет к нему обработчик событий. После добавления обработчика, мы, также, непосредственно вызываем обработчик. Это заставляет нашего обработчика выполнять настройки, основываясь на текущей ориентации устройства; в противном случае, наш код может предполагать, что устройство находится в книжной ориентации при запуске, даже если оно фактически находится в альбомном положении.

    Функция handleOrientationChange() будет следить за результатом запроса и обрабатывать все, что нам нужно сделать при изменении ориентации:

    @@ -55,7 +55,7 @@ handleOrientationChange(mediaQueryList); // Запуск обработчика }
    -

    Выше, мы определяем параметры как evt — event объект. Это имеет значение, поскольку новые реализации MediaQueryList обрабатывают слушатели событий стандартным способом. Они больше не используют нестандартный механизм  {{domxref("MediaQueryListListener")}} , а используют стандартную настройку слушателя событий, передавая объект event  {{domxref("MediaQueryListEvent")}} как аргумент функции обратного вызова.

    +

    Выше, мы определяем параметры как evt — event объект. Это имеет значение, поскольку новые реализации MediaQueryList обрабатывают события стандартным способом. Они больше не используют нестандартный механизм  {{domxref("MediaQueryListListener")}} , а используют стандартную настройку обработчика событий, передавая объект event  {{domxref("MediaQueryListEvent")}} как аргумент функции обратного вызова.

    Этот event объект также включает свойства {{domxref("MediaQueryListEvent.media","media")}} и {{domxref("MediaQueryListEvent.matches","matches")}}, поэтому вы можете запросить эти свойства MediaQueryList путем прямого доступа к нему или доступа к event объекту.

    diff --git a/files/ru/web/css/pointer-events/index.html b/files/ru/web/css/pointer-events/index.html index 61b1135e27..2c12b8b291 100644 --- a/files/ru/web/css/pointer-events/index.html +++ b/files/ru/web/css/pointer-events/index.html @@ -91,7 +91,7 @@ img {

    Примечание

    -

    Обратите внимание, что предотвращение того, чтобы элемент был объектом событий мыши,  с помощью pointer-events не обязательно означает, что прослушиватели событий мыши на этом элементе не могут или не будут запускаться. Если у одного из  дочерних элементов есть явные pointer-events, позволяющие этому ребенку быть объектом событий мыши, тогда любые события, нацеленные на этого дочернего элемента, будут проходить через родителя, когда событие перемещается вдоль родительской цепочки и запускает прослушиватели событий на родительском объекте. Конечно, любая активность мыши в точке на экране, которая покрывается родителем, но не дочерним, не будет поймана ни ребенком, ни родителем (он пройдет через «родительский» на «цели» под ним).

    +

    Обратите внимание, что предотвращение того, чтобы элемент был объектом событий мыши,  с помощью pointer-events не обязательно означает, что обработчики событий мыши на этом элементе не могут или не будут запускаться. Если у одного из  дочерних элементов есть явные pointer-events, позволяющие этому ребенку быть объектом событий мыши, тогда любые события, нацеленные на этого дочернего элемента, будут проходить через родителя, когда событие перемещается вдоль родительской цепочки и запускает обработчики событий на родительском объекте. Конечно, любая активность мыши в точке на экране, которая покрывается родителем, но не дочерним, не будет поймана ни ребенком, ни родителем (он пройдет через «родительский» на «цели» под ним).

    Мы хотели бы предоставить более тонкий контроль (а не только auto и none) в HTML, когда части элемента смогут «поймать» события мыши. Если у вас есть какие-то конкретные вещи, чтобы помочь нам в решении как следует расширить pointer-events для HTML, и которые вы хотели бы сделать с этим свойством, добавьте их в раздел «Использовать случаи» на этой странице вики (не беспокойтесь, мы всё сохраним аккуратно). 

    diff --git a/files/ru/web/events/index.html b/files/ru/web/events/index.html index 417b77443f..c760122766 100644 --- a/files/ru/web/events/index.html +++ b/files/ru/web/events/index.html @@ -394,11 +394,11 @@ translation_of: Web/Events
  • - + - + @@ -408,11 +408,11 @@ translation_of: Web/Events - + - + 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 index 0f457ad8b2..7be572dc0f 100644 --- 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 @@ -32,7 +32,7 @@ translation_of: Web/Guide/Events/Overview_of_Events_and_Handlers
  • регистрации функции с помощью имени-строки через объект, который будет вызывать событие.
  • -

    Функция считается "слушателем" или "обработчиком", где оба именами взаимозаменяемы. Этому шаблону можно легко следовать с использованием полностью пользовательского кода, как объяснено в статье о пользовательских событиях. Шаблон так же используется современными web-браузерами, определяющими множество событий, которые вызываются в ответ на пользовательский ввод или активность браузера.

    +

    Функция считается "обработчиком", где оба именами взаимозаменяемы. Этому шаблону можно легко следовать с использованием полностью пользовательского кода, как объяснено в статье о пользовательских событиях. Шаблон так же используется современными web-браузерами, определяющими множество событий, которые вызываются в ответ на пользовательский ввод или активность браузера.

    Современные браузеры следуют событийному шаблону, используя стандартизированный подход. В качестве структуры данных для свойств события они применяют объект, полученный от объекта EventPrototype. Для регистратрации функции, которая будет обрабатывать эту структуру данных, используется метод, называемый addEventListener, который ожидает в качестве аргумента имя-строку, соответствующую типу события, и функцию-обработчика. В итоге, браузеры определяют огромное число объектов источников событий и широкое разнообразие типов событий, сформированных объектами.

    @@ -42,7 +42,7 @@ translation_of: Web/Guide/Events/Overview_of_Events_and_Handlers
    <button id="buttonOne">Click here to emit a 'click' event</button>
    -

    и, в коде JavaScript, мы можем сначала определить функцию для прослушивания этого события 'click' :

    +

    и, в коде JavaScript, мы можем сначала определить функцию для обработки этого события 'click' :

    var example_click_handler = function (ev){
         var objKind = (ev instanceof Event) ? "EventPrototype" : "ObjectPrototype";
    @@ -58,7 +58,7 @@ buttonDOMElement.addEventListener('click', example_click_handler);

    {{ EmbedLiveSample('Button_Event_Handler') }}

    -

    Этот код полагается на соглашение о том, что существует некоторый вид события, называемый 'click' , который вызовет все функции-слушатели (или 'обработчик') с объектом-аргументом Event (на данный момент, в этом случае производный от объекта MouseEvent ) и будет запущен после манипуляций пользователя с элементами button на HTML-странице. Код не имеет видимого воздействия, пока пользователь не использует кнопки, наводит указатель мыши на элемент HTML и нажимает на левую кнопку или устанавливает палец или стилус на некоторое место на экране, выше кнопки; когда это произойдет, buttonDOMElement объекта JavaScript вызовет функцию example_click_handler с объектом Event в качестве аргумента. Функция, в свою очередь, исполнит любые действия, описанные программистом, в данном случае отрыв диалоговое окно HTML. Заметим, что обработчик имеет доступ к объекту ev, так как тот передается в качестве аргумента; объект содержит информацию о событие, в частности время его возникновения.

    +

    Этот код полагается на соглашение о том, что существует некоторый вид события, называемый 'click' , который вызовет все функции-обработчики (или 'обработчик') с объектом-аргументом Event (на данный момент, в этом случае производный от объекта MouseEvent ) и будет запущен после манипуляций пользователя с элементами button на HTML-странице. Код не имеет видимого воздействия, пока пользователь не использует кнопки, наводит указатель мыши на элемент HTML и нажимает на левую кнопку или устанавливает палец или стилус на некоторое место на экране, выше кнопки; когда это произойдет, buttonDOMElement объекта JavaScript вызовет функцию example_click_handler с объектом Event в качестве аргумента. Функция, в свою очередь, исполнит любые действия, описанные программистом, в данном случае отрыв диалоговое окно HTML. Заметим, что обработчик имеет доступ к объекту ev, так как тот передается в качестве аргумента; объект содержит информацию о событие, в частности время его возникновения.

    Во втором варианте, интегрирован в web-страницу намного более современный JavaScript обернут в событийный вызов функции, чтобы убедиться, что код будет выполнен только тогда, когда HTML будет обработан и доступен для изменения или декорирования. Например, код может быть объявлен так:

    diff --git a/files/ru/web/html/cors_enabled_image/index.html b/files/ru/web/html/cors_enabled_image/index.html index 7f856ba8af..5c36131100 100644 --- a/files/ru/web/html/cors_enabled_image/index.html +++ b/files/ru/web/html/cors_enabled_image/index.html @@ -73,7 +73,7 @@ translation_of: Web/HTML/CORS_enabled_image downloadedImg.src = imageURL; } -

    Здесь мы используем жёстко закодированный URL-адрес (imageURL), но он запросто может поступать откуда угодно. Чтобы начать загрузку изображения, мы создаём новый объект {{domxref("HTMLImageElement")}} с помощью конструктора {{domxref("HTMLImageElement.Image", "Image()")}}. Затем изображение настраивается так, чтобы разрешить загрузку из другого источника. Для этого его атрибут crossOrigin устанавливается на "Anonymous" (то есть разрешение неавторизованной загрузки изображения из перекрёстного источника). Прослушиватель событий добавляется к событию {{event("load")}}, запускаемому на элементе изображения, что означает, что данные изображения были получены.

    +

    Здесь мы используем жёстко закодированный URL-адрес (imageURL), но он запросто может поступать откуда угодно. Чтобы начать загрузку изображения, мы создаём новый объект {{domxref("HTMLImageElement")}} с помощью конструктора {{domxref("HTMLImageElement.Image", "Image()")}}. Затем изображение настраивается так, чтобы разрешить загрузку из другого источника. Для этого его атрибут crossOrigin устанавливается на "Anonymous" (то есть разрешение неавторизованной загрузки изображения из перекрёстного источника). Обработчик событий добавляется к событию {{event("load")}}, запускаемому на элементе изображения, что означает, что данные изображения были получены.

    Наконец, атрибут {{domxref("HTMLImageElement.src", "src")}} изображения устанавливается в URL-адрес загружаемого изображения; это инициирует начало загрузки.

    diff --git a/files/ru/web/html/element/input/radio/index.html b/files/ru/web/html/element/input/radio/index.html index dd2c1e384e..76bd790484 100644 --- a/files/ru/web/html/element/input/radio/index.html +++ b/files/ru/web/html/element/input/radio/index.html @@ -134,7 +134,7 @@ translation_of: Web/HTML/Element/input/radio </pre> -

    Затем добавим немного JavaScript. Установим слушателя для события {{event("submit")}}, которая будет отправляться при клике пользователя на кнопку "Отправить":

    +

    Затем добавим немного JavaScript. Установим обработчик события {{event("submit")}}, которая будет отправляться при клике пользователя на кнопку "Отправить":

    var form = document.querySelector("form");
     var log = document.querySelector("#log");
    diff --git a/files/ru/web/http/cors/index.html b/files/ru/web/http/cors/index.html
    index 58ed9b8b87..368334dcfd 100644
    --- a/files/ru/web/http/cors/index.html
    +++ b/files/ru/web/http/cors/index.html
    @@ -180,7 +180,7 @@ Content-Type: application/xml
        
  • text/plain
  • -
  • Или если один или больше слушателей событий зарегистрированы на объекте {{domxref("XMLHttpRequestUpload")}}, который используется в запросе.
  • +
  • Или если один или больше обработчиков событий зарегистрированы на объекте {{domxref("XMLHttpRequestUpload")}}, который используется в запросе.
  • Или если объект {{domxref("ReadableStream")}} используется в запросе.
  • diff --git a/files/ru/web/http/csp/index.html b/files/ru/web/http/csp/index.html index c5c1d48294..66c9f059bc 100644 --- a/files/ru/web/http/csp/index.html +++ b/files/ru/web/http/csp/index.html @@ -78,7 +78,7 @@ translation_of: Web/HTTP/CSP

    Пример 4

    -

    Вы хотите удостовериться, что весь получаемый контент для онлайн-банкинга идет по SSL и атакующий не сможет прослушивать запросы:

    +

    Вы хотите удостовериться, что весь получаемый контент для онлайн-банкинга идет по SSL и атакующий не сможет обрабатывать запросы:

    Content-Security-Policy: default-src https://onlinebanking.jumbobank.com
    diff --git a/files/ru/web/http/headers/x-content-type-options/index.html b/files/ru/web/http/headers/x-content-type-options/index.html index 63c668d4ae..7271e86cd1 100644 --- a/files/ru/web/http/headers/x-content-type-options/index.html +++ b/files/ru/web/http/headers/x-content-type-options/index.html @@ -13,7 +13,7 @@ original_slug: Web/HTTP/Заголовки/X-Content-Type-Options

    HTTP-заголовок ответа X-Content-Type-Options является маркером, используемым сервером для указания того, что типы MIME, объявленные в заголовках {{HTTPHeader ("Content-Type")}}, должны соблюдаться и не изменяться. Это позволяет отказаться от перехвата MIME, или, другими словами, это способ сказать, что веб-мастера знали, что они делают.

    -

    Этот HTTP-заголовок был введен Microsoft в IE 8 как способ для веб-мастеров блокировать происходящий перехват содержимого и может преобразовывать неисполняемые типы MIME в исполняемые типы MIME. С тех пор другие браузеры внедрили его, даже если их алгоритмы прослушивания MIME были менее агрессивными.

    +

    Этот HTTP-заголовок был введен Microsoft в IE 8 как способ для веб-мастеров блокировать происходящий перехват содержимого и может преобразовывать неисполняемые типы MIME в исполняемые типы MIME. С тех пор другие браузеры внедрили его, даже если их алгоритмы обработки MIME были менее агрессивными.

    Тестеры безопасности сайта обычно ожидают, что этот заголовок будет установлен.

    diff --git a/files/ru/web/javascript/reference/operators/this/index.html b/files/ru/web/javascript/reference/operators/this/index.html index 6bf5f9f20a..59761d890e 100644 --- a/files/ru/web/javascript/reference/operators/this/index.html +++ b/files/ru/web/javascript/reference/operators/this/index.html @@ -346,9 +346,9 @@ bar.call(7); // [object Number]

    Как обработчик событий DOM

    -

    Когда функция используется как обработчик событий, this присваивается элементу с которого начинается событие (некоторые браузеры не следуют этому соглашению для слушателей, добавленных динамически с помощью всех методов, кроме addEventListener).

    +

    Когда функция используется как обработчик событий, this присваивается элементу с которого начинается событие (некоторые браузеры не следуют этому соглашению для обработчиков, добавленных динамически с помощью всех методов, кроме addEventListener).

    -
    // Когда вызывается как слушатель, связанный элемент становится синим
    +
    // Когда вызывается как обработчик, связанный элемент становится синим
     function bluify(e) {
       // Всегда true
       console.log(this === e.currentTarget);
    @@ -360,7 +360,7 @@ function bluify(e) {
     // Получить список каждого элемента в документе
     var elements = document.getElementsByTagName('*');
     
    -// Добавить bluify как слушателя кликов, чтобы при
    +// Добавить bluify как обработчика кликов, чтобы при
     // нажатии на элемент он становился синим
     for (var i = 0; i < elements.length; i++) {
       elements[i].addEventListener('click', bluify, false);
    diff --git a/files/ru/web/web_components/index.html b/files/ru/web/web_components/index.html
    index 647bde94bd..d1a190bca7 100644
    --- a/files/ru/web/web_components/index.html
    +++ b/files/ru/web/web_components/index.html
    @@ -24,7 +24,7 @@ translation_of: Web/Web_Components
     
    1. Создайте класс, в котором вы указываете функциональность своего веб-компонента, используя синтаксис классов ECMAScript 2015 (дополнительную информацию см. в разделе Классы).
    2. Зарегистрируйте свой новый настраиваемый элемент с помощью метода {{domxref("CustomElementRegistry.define()")}}, передав ему имя элемента, который будет определен, класс или функцию, в которых указана его функциональность, и, необязательно, от какого элемента он наследуется.
    3. -
    4. При необходимости прикрепите теневую DOM к настраиваемому элементу с помощью метода {{domxref("Element.attachShadow()")}}. Добавьте дочерние элементы, прослушиватели событий и т.д. в теневой DOM, используя обычные методы DOM.
    5. +
    6. При необходимости прикрепите теневую DOM к настраиваемому элементу с помощью метода {{domxref("Element.attachShadow()")}}. Добавьте дочерние элементы, обработчики событий и т.д. в теневой DOM, используя обычные методы DOM.
    7. При необходимости определите HTML template, используя {{htmlelement("template")}} и {{htmlelement("slot")}}. Снова используйте обычные методы DOM, чтобы клонировать шаблон и прикрепить его к вашей теневой DOM.
    8. Используйте свой настраиваемый элемент везде, где хотите, на своей странице, как и любой обычный элемент HTML.
    @@ -107,7 +107,7 @@ translation_of: Web/Web_Components
    Расширения интерфейса Event, относящиеся к теневой модели DOM:
    • {{domxref("Event.composed")}}: возвращает {{jsxref("Boolean")}}, который указывает, будет ли событие распространяться через границу теневой DOM в стандартную DOM (true) или нет (false).
    • -
    • {{domxref ("Event.composedPath")}}: возвращает путь к событию (объекты, для которых будут вызваны слушатели). Это не включает узлы в теневых деревьях, если теневой корневой узел был создан с закрытым {{domxref("ShadowRoot.mode")}}.
    • +
    • {{domxref ("Event.composedPath")}}: возвращает путь к событию (объекты, для которых будут вызваны обработчики). Это не включает узлы в теневых деревьях, если теневой корневой узел был создан с закрытым {{domxref("ShadowRoot.mode")}}.
    -- cgit v1.2.3-54-g00ecf
    {{Event("mouseenter")}}Указывающее устройство перемещено на элемент, к которому подключен прослушиватель.Указывающее устройство перемещено на элемент, к которому подключен обработчик.
    {{Event("mouseleave")}}Указывающее устройство перемещается от элемента, к которому подключен прослушиватель.Указывающее устройство перемещается от элемента, к которому подключен обработчик.
    {{Event("mousemove")}}
    {{Event("mouseover")}}
    Указывающее устройство перемещается на элемент, к которому подключен прослушиватель, или на один из его дочерних элементов.Указывающее устройство перемещается на элемент, к которому подключен обработчик, или на один из его дочерних элементов.
    {{Event("mouseout")}}Указывающее устройство перемещается от элемента, к которому подключен прослушиватель, или от одного из его дочерних элементов.Указывающее устройство перемещается от элемента, к которому подключен обработчик, или от одного из его дочерних элементов.
    {{Event("mouseup")}}