minor

Author: iliakan

2-ui/2-events/02-bubbling-and-capturing/article.md

@@ -108,9 +108,9 @@
 
 Например:
 
-1. Мы делаем вложенное меню.  Каждое подменю обрабатывает клики на своих элементах и делает для них `stopPropagation`, чтобы не открывать внешнее меню.
+1. Мы делаем вложенное меню.  Каждое подменю обрабатывает клики на своих элементах и делает для них `stopPropagation`, чтобы не срабатывало внешнее меню.
 2. Позже мы решили отслеживать все клики в окне для какой-то своей функциональности, к примеру, для статистики – где вообще у нас кликают люди. Некоторые системы аналитики так делают. Обычно используют `document.addEventListener('click'…)`, чтобы отлавливать все клики.
-3. Наша аналитика не будет работать над областью, где клики прекращаются `stopPropagation`. Получилась «мёртвая зона».
+3. Наша аналитика не будет работать над областью, где клики прекращаются `stopPropagation`. Увы, получилась "мёртвая зона".
 
 Зачастую нет никакой необходимости прекращать всплытие. Задача, которая, казалось бы, требует этого, может быть решена иначе. Например, с помощью создания своего уникального события, о том, как это делать, мы поговорим позже. Также мы можем записывать какую-то служебную информацию в объект `event` в одном обработчике, а читать в другом, таким образом мы можем сообщить обработчикам на родительских элементах информацию о том, что событие уже было как-то обработано.
 ```
@@ -134,7 +134,7 @@
 
 **Ранее мы говорили только о всплытии, потому что другие стадии, как правило, не используются и проходят незаметно для нас.**
 
-Обработчики, добавленные через `on<event>`-свойство или через HTML-атрибуты, или через `addEventListener(event, handler)`, ничего не знают о фазе погружения, а работают только на 2-ой и 3-ей фазах.
+Обработчики, добавленные через `on<event>`-свойство или через HTML-атрибуты, или через `addEventListener(event, handler)` с двумя аргументами, ничего не знают о фазе погружения, а работают только на 2-ой и 3-ей фазах.
 
 Чтобы поймать событие на стадии погружения, нужно использовать третий аргумент `capture` вот так:
 
@@ -190,7 +190,7 @@ elem.addEventListener(..., true)
 ```
 
 ````smart header="На каждой фазе разные обработчики на одном элементе срабатывают в порядке назначения"
-Если у нас несколько обработчиков одного события, назначенных `addEventListener` на один элемент, в рамках одной фазы их порядок срабатывания - тот же, в котором они установлены:
+Если у нас несколько обработчиков одного события, назначенных `addEventListener` на один элемент, в рамках одной фазы, то их порядок срабатывания - тот же, в котором они установлены:
 
 ```js
 elem.addEventListener("click", e => alert(1)); // всегда сработает перед следующим
@@ -200,11 +200,9 @@ elem.addEventListener("click", e => alert(2));
 
 ## Итого
 
-Алгоритм:
+При наступлении события - самый глубоко вложенный элемент, на котором оно произошло, помечается как "целевой" (`event.target`).
 
-При наступлении события -- элемент, на котором оно произошло, помечается как "целевой" (`event.target`).
-
-- Событие сначала двигается вниз от корня документа к `event.target`, по пути вызывая обработчики, поставленные через `addEventListener(...., true), где `true` -- это сокращение для `{capture: true}`.
+- Затем событие сначала двигается вниз от корня документа к `event.target`, по пути вызывая обработчики, поставленные через `addEventListener(...., true), где `true` -- это сокращение для `{capture: true}`.
 - Далее обработчики вызываются на целевом элементе.
 - Далее событие двигается от `event.target` вверх к корню документа, по пути вызывая обработчики, поставленные через `on<event>` и `addEventListener` без третьего аргумента или с третьим аргументом равным `false`.
 
@@ -222,4 +220,4 @@ elem.addEventListener("click", e => alert(2));
 
 Тоже самое справедливо для обработчиков событий. Код, который "навесил" обработчик на конкретный элемент, знает максимум деталей об элементе и его предназначении. Например, обработчик на определённом `<td>` скорее всего подходит только для этого конкретного `<td>`, он знает все о нём, поэтому он должен отработать первым. Далее имеет смысл передать обработку события родителю -- он тоже понимает, что происходит, но уже менее детально, далее – выше, и так далее, до самого объекта `document`, обработчик на котором реализовывает самую общую функциональность уровня документа.
 
-Всплытие и погружение являются основой для "делегирования событий" -- очень мощного приёма обработки событий. Его мы изучим в следующей главе.
+Всплытие и погружение являются основой для "делегирования событий" -- очень мощного приёма обработки событий. Его мы изучим в следующей главе.

2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.svg

@@ -30,9 +30,9 @@
 </table>
 ```
 
-В этой таблице всего 9 ячеек, но могло быть и 99, и даже 9999, не важно.
+В этой таблице всего 9 ячеек, но могло бы быть и 99, и даже 9999, не важно.
 
-**Наша задача -- реализовать подсветку ячейки `<td>` при клике.**
+**Наша задача - реализовать подсветку ячейки `<td>` при клике.**
 
 Вместо того, чтобы назначать обработчик `onclick` для каждой ячейки `<td>` (их может быть очень много) -- мы повесим "единый" обработчик на элемент `<table>`.
 
@@ -105,13 +105,13 @@ table.onclick = function(event) {
 3. Если таблицы вложенные, `event.target` может содержать элемент `<td>`, находящийся вне текущей таблицы. В таких случаях мы должны проверить действительно ли это `<td>` *нашей таблицы*.
 4. И если это так, то подсвечиваем его.
 
-## Применение делегирования: действия в разметке
+В итоге мы получили короткий код подсветки, быстрый и эффективный, которому совершенно не важно, сколько всего в таблице `<td>`.
 
-Делегирование событий может быть использовано для оптимизации обработчиков. Мы используем один обработчик для схожих действий на многих элементах. Как мы делали это с подсветкой `<td>`.
+## Применение делегирования: действия в разметке
 
-Но мы также можем применять делегирование, используя единый обработчик, во многих других ситуациях.
+Есть и другие применения делегирования.
 
-Например, нам нужно сделать меню с разными кнопками: "Сохранить", "Загрузить", "Поиск" и т.д. И есть объект с соответствующими методами `save`, `load`, `search`....
+Например, нам нужно сделать меню с разными кнопками: "Сохранить (save)", "Загрузить (load)", "Поиск (search)" и т.д. И есть объект с соответствующими методами `save`, `load`, `search`... Как их состыковать?
 
 Первое, что может прийти в голову – это найти каждую кнопку и назначить ей свой обработчик среди методов объекта. Но существует более элегантное решение. Мы можем добавить один обработчик для всего меню и атрибуты `data-action` для каждой кнопки в соответствии с методами, которые они вызывают:
 
@@ -161,7 +161,7 @@ table.onclick = function(event) {
 </script>
 ```
 
-Обратите внимание, что метод `this.onClick` в строке отмеченной звёздочкой `(*)`, привязывается к контексту текущего объекта `this`. Это важно, т.к. иначе `this` внутри него будет ссылаться на DOM-элемент (`elem`), а не на объект меню, и `this[action]` будет не тем, что нам нужно.
+Обратите внимание, что метод `this.onClick` в строке, отмеченной звёздочкой `(*)`, привязывается к контексту текущего объекта `this`. Это важно, т.к. иначе `this` внутри него будет ссылаться на DOM-элемент (`elem`), а не на объект `Menu`, и `this[action]` будет не тем, что нам нужно.
 
 Так что же даёт нам здесь делегирование?
 
@@ -177,16 +177,16 @@ table.onclick = function(event) {
 Делегирование событий можно использовать для добавления элементам "поведения" (behavior), *декларативно* задавая хитрые обработчики установкой специальных HTML-атрибутов и классов.
 
 Приём проектирования "поведение" состоит из двух частей:
-1. Элементу ставится атрибут, описывающий его поведение.
-2. При помощи делегирования ставится обработчик на документ, который ловит все клики (или другие события) и, если элемент имеет нужный атрибут -- производит нужное действие.
+1. Элементу ставится пользовательский атрибут, описывающий его поведение.
+2. При помощи делегирования ставится обработчик на документ, который ловит все клики (или другие события) и, если элемент имеет нужный атрибут -- производит соответствующее действие.
 
-### Пример "Счётчик"
+### Поведение: "Счётчик"
 
 Например, здесь HTML-атрибут `data-counter` добавляет кнопкам поведение: "увеличить значение при клике":
 
 ```html run autorun height=60
-Counter: <input type="button" value="1" data-counter>
-One more counter: <input type="button" value="2" data-counter>
+Счётчик: <input type="button" value="1" data-counter>
+Ещё счётчик: <input type="button" value="2" data-counter>
 
 <script>
   document.addEventListener('click', function(event) {
@@ -204,14 +204,14 @@ One more counter: <input type="button" value="2" data-counter>
 Элементов с атрибутом `data-counter` может быть сколько угодно. Новые могут добавляться в HTML-код в любой момент. При помощи делегирования мы, фактически, добавили новый "псевдостандартный" атрибут в HTML, который добавляет элементу новую возможность ("поведение").
 
 ```warn header="Всегда используйте метод `addEventListener` для обработчиков на уровне документа"
-Когда мы устанавливаем обработчик событий на объект `document`, мы всегда должны использоваать метод `addEventListener`, а не `document.onclick`, т.к. в случае последнего могут возникать конфликты: новые обработчики будут перезаписывать уже существующие.
+Когда мы устанавливаем обработчик событий на объект `document`, мы всегда должны использоваать метод `addEventListener`, а не `document.on<событие>`, т.к. в случае последнего могут возникать конфликты: новые обработчики будут перезаписывать уже существующие.
 
 Для реального проекта совершенно нормально иметь много обработчиков на элементе `document`, установленных из разных частей кода.
 ```
 
-### Пример "Переключатель" (Toggler)
+### Поведение: "Переключатель" (Toggler)
 
-Ещё один пример. Сделаем так, что при клике на элемент с атрибутом `data-toggle-id` будет скрываться/показываться элемент с заданным `id`:
+Ещё один пример поведения. Сделаем так, что при клике на элемент с атрибутом `data-toggle-id` будет скрываться/показываться элемент с заданным `id`:
 
 ```html autorun run height=60
 <button *!*data-toggle-id="subscribe-mail"*/!*>
@@ -236,7 +236,7 @@ One more counter: <input type="button" value="2" data-counter>
 </script>
 ```
 
-Ещё раз заметим, что мы сделали. Теперь для того, чтобы добавить скрытие-раскрытие любому элементу, даже не надо знать JavaScript, можно просто написать атрибут `data-toggle-id`.
+Ещё раз подчеркнём, что мы сделали. Теперь для того, чтобы добавить скрытие-раскрытие любому элементу, даже не надо знать JavaScript, можно просто написать атрибут `data-toggle-id`.
 
 Это бывает очень удобно -- не нужно писать JavaScript-код для каждого элемента, который должен так себя вести. Просто используем поведение. Обработчики на уровне документа сделают это возможным для элемента в любом месте страницы.
 

2-ui/2-events/03-event-delegation/article.md

@@ -376,3 +376,9 @@ proto-animal-rabbit-walk-3.svg:
 
 class-inheritance-rabbit-animal-2.svg:
   'name: "White Rabbit"': 'name: "Белый кролик"'
+
+event-order-bubbling.svg:
+  _defaults:
+    position: "center"
+  'Most deeply': 'Самый глубоко'
+  'nested element': 'вложенный элемент'