Ревью

xcurveballx · xcurveballx · commit 1c31bc349580 · 2019-05-29T22:21:09.000+03:00
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML>
-<html lang="ru">
+<html>
 
 <head>
   <meta charset="utf-8">
@@ -67,7 +67,7 @@
 
     document.onmouseover = function(event) {
       // важно: быстро движущийся курсор может прыгнуть сразу к дочернему элементу, пропустив родительский
-      // то есть событие mouseover может произойти на дочернем элементе.
+      // так что событие mouseover произойдёт сразу на дочернем элементе.
 
       let anchorElem = event.target.closest('[data-tooltip]');
 
@@ -78,12 +78,13 @@
     }
 
     document.onmouseout = function() {
-      // возможно, что из-за всплытия запустилось событие mouseout, но мы всё ещё внутри элемента
+      // возможно такое, что произошло событие mouseout, но мы всё ещё внутри элемента
+      // (оно было где-то внутри и всплыло)
       // но в этом случае сразу же последует событие mouseover,
       // то есть подсказка исчезнет и потом снова покажется
       //
-      // это уже вне данной задачи, но тут подсказка невидима
-      // может быть исправлено дополнительными проверками
+      // к счастью, этого не будет видно,
+      // так как оба события происходят почти одновременно
       if (tooltip) {
         tooltip.remove();
         tooltip = false;
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML>
-<html lang="ru">
+<html>
 
 <head>
   <meta charset="utf-8">
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md
@@ -4,7 +4,7 @@ importance: 5
 
 # Улучшенная подсказка
 
-Напишите JavaScript код, который показывает подсказку (tooltip) над элементом со значением, взятым в атрибуте `data-tooltip`.
+Напишите JavaScript код, который показывает подсказку над элементом со значением, взятым из атрибута `data-tooltip`.
 
 Это похоже на задачу <info:task/behavior-tooltip>, но здесь элементы с подсказками могут быть вложены друг в друга. Показываться должна подсказка на самом глубоко вложенном элементе.
 
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="ru">
+<html>
 
 <head>
   <meta charset="UTF-8">
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="ru">
+<html>
 
 <head>
   <meta charset="UTF-8">
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md
@@ -13,7 +13,7 @@ importance: 5
 Создайте для этого универсальный объект `new HoverIntent(options)` с `options`:
 
 - `elem` -- отслеживаемый элемент.
-- `over` -- функция, вызываемая, если курсор двигается медленно.
+- `over` -- функция, вызываемая, если курсор медленно двигается над элементом.
 - `out` -- функция, вызываемая при уходе курсора с элемента (если было наведение).
 
 Пример использования такого объекта для показа подсказки:
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
@@ -1,14 +1,14 @@
-# Мышь: движение mouseover/out, mouseenter/leave
+# Мышь: mouseover/out, mouseenter/leave
 
 В этой главе мы более подробно рассмотрим события, возникающие при движении указателя (курсора) мыши над элементами страницы.
 
 ## Mouseover/mouseout, relatedTarget
 
-Событие `mouseover` происходит однократно в момент, когда курсор оказывается над элементом, а событие `mouseout` -- тоже однократно, но в момент, когда курсор уходит с элемента.
+Событие `mouseover` происходит в момент, когда курсор оказывается над элементом, а событие `mouseout` -- в момент, когда курсор уходит с элемента.
 
 ![](mouseover-mouseout.png)
 
-Эти события являются особенными, потому что у них имеется свойство `relatedTarget`.
+Эти события являются особенными, потому что у них имеется свойство `relatedTarget`. Оно "дополняет" `target`. Когда мышь переходит с одного элемента на другой, то один из них будет `target`, а другой `relatedTarget`.
 
 Для события `mouseover`:
 
@@ -33,7 +33,7 @@
 
 Это нормально и означает, что указатель мыши перешёл не с другого элемента, а из-за пределов окна браузера. Или же, наоборот, ушёл за пределы окна.
 
-Разработчикам следует держать в голове такие варианты при использовании `event.relatedTarget` в своём коде. Если, например, написать `event.relatedTarget.tagName`, то при отсутствии `event.relatedTarget` будет ошибка.
+Следует держать в уме такую возможность при использовании `event.relatedTarget` в своём коде. Если, например, написать `event.relatedTarget.tagName`, то при отсутствии `event.relatedTarget` будет ошибка.
 ```
 
 ## Частота запуска событий
@@ -57,7 +57,7 @@
 ![](mouseover-mouseout-from-outside.png)
 
 <div style="display:none">
-В случае быстрого прохождения курсором промежуточных элементов события вообще могут не генерироваться. Но если уж курсор перешёл на элемент (было сгенерировано `mouseover`), то гарантировано при выходе с того элемента будет запущено событие `mouseout`.
+В случае быстрого прохождения курсором промежуточных элементов события вообще могут не генерироваться. Но если уж курсор перешёл на элемент (было сгенерировано `mouseover`), то гарантированно при выходе с того элемента будет запущено событие `mouseout`.
 </div>
 
 ```online
@@ -78,13 +78,13 @@
 
 Это выглядит странно, но легко объясняется.
 
-**По логике браузера, курсор мыши может быть только над одним элементом в любой момент времени - над самым глубоко вложенным (и/или имеющим приоритетное значение z-index).**
+**По логике браузера, курсор мыши может быть только над одним элементом в любой момент времени - над самым глубоко вложенным (и верхним по z-index).**
 
 Таким образом, если курсор переходит на другой элемент (пусть даже дочерний), то он покидает предыдущий. Достаточно просто.
 
-В примере ниже можно увидеть эту забавную последовательность сгенерированных событий.
+Это ведёт к забавным последствиям, которые мы можем видеть на примере ниже.
 
-Красный `<div>` находится внутри синего. На синем элементе `<div>` определены обработчики событий `mouseover/out`, которые отображают всю информацию о них в текстовое поле ниже.
+Красный `<div>` находится внутри синего. На синем элементе `<div>` определены обработчики событий `mouseover/out`, которые выводят всю информацию о них в текстовое поле ниже.
 
 Попробуйте зайти курсором на синий элемент, а затем перейдите на красный -- и смотрите, какие события сгенерировались:
 
@@ -179,7 +179,7 @@ table.onmouseout = function(event) {
 
 Стоит отметить, что:
 
-- Быстрое движение мыши может не запустить события `mouseover, mousemove, mouseout` на промежуточных элементах.
+- При быстром движении мыши события `mouseover, mousemove, mouseout` не будут возникать на промежуточных элементах.
 - События `mouseover/out` и `mouseenter/leave` имеют дополнительное свойство: `relatedTarget`. Оно дополняет свойство `target` и содержит ссылку на элемент, с/на который мы переходим.
-- События `mouseover/out` запускаются, даже когда происходит переход с родительского элемента на дочерний. В этом случае предполагается, что курсор мыши может быть только над одним элементом в любой момент времени - над самым глубоко вложенным.
+- События `mouseover/out` возникают, даже когда происходит переход с родительского элемента на дочерний. В этом случае предполагается, что курсор мыши может быть только над одним элементом в любой момент времени - над самым глубоко вложенным.
 - События `mouseenter/leave` не всплывают и не генерируются, когда курсор переходит на дочерний элемент. Они запускаются только при переходах с/на сам элемент, не принимая во внимание его дочерние элементы.
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML>
-<html lang="ru">
+<html>
 
 <head>
   <meta charset="utf-8">
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js
@@ -11,7 +11,7 @@ table.onmouseover = function(event) {
   let target = event.target.closest('td');
   if (!target || !table.contains(target)) return;
 
-  // даа... мы внутри <td> сейчас
+  // отлично, мы сейчас внутри <td>
   currentElem = target;
   target.style.background = 'pink';
 };
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML>
-<html lang="ru">
+<html>
 
 <head>
   <meta charset="utf-8">
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML>
-<html lang="ru">
+<html>
 
 <head>
   <meta charset="utf-8">
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML>
-<html lang="ru">
+<html>
 
 <head>
   <meta charset="utf-8">
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="ru">
+<html>
 
 <head>
   <meta charset="UTF-8">
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="ru">
+<html>
 
 <head>
   <meta charset="UTF-8">
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML>
-<html lang="ru">
+<html>
 
 <head>
   <meta charset="utf-8">
