mouseenter/mouseleave правки

Author: xcurveballx

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md

@@ -12,26 +12,26 @@
 
 Для события `mouseover`:
 
-- `event.target` -- это элемент, на который курсор зашёл.
+- `event.target` -- это элемент, на который курсор перешёл.
 - `event.relatedTarget` -- это элемент, с которого курсор ушёл.
 
 Для события `mouseout` наоборот:
 
 - `event.target` -- это элемент, с которого курсор ушёл.
-- `event.relatedTarget` -- это элемент, на который курсор зашёл.
+- `event.relatedTarget` -- это элемент, на который курсор перешёл.
 
 ```online
 В примере ниже каждое изображение - отдельный элемент. При движении курсора по этим элементам в текстовом поле отображаются произошедшие события.
 
-Каждое из них содержит информацию о том, откуда на соответствующий элемент пришёл и куда с него ушёл курсор.
+Каждое из них содержит информацию о том, откуда на соответствующий элемент перешёл и куда с него ушёл курсор.
 
 [codetabs src="mouseoverout" height=280]
 ```
 
 ```warn header="Свойство `relatedTarget` может быть `null`"
 Свойство `relatedTarget` может быть `null`.
 
-Это нормально и означает, что указатель мыши пришёл не с другого элемента, а из-за пределов окна браузера. Или же, наоборот, ушёл за пределы окна.
+Это нормально и означает, что указатель мыши перешёл не с другого элемента, а из-за пределов окна браузера. Или же, наоборот, ушёл за пределы окна.
 
 Разработчикам следует держать в голове такие варианты при использовании `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
@@ -72,13 +72,13 @@
 
 ## "Лишний" mouseout при уходе на потомка
 
-Представьте ситуацию -- курсор мыши зашёл на элемент. Сгенерировано событие `mouseover`. Затем курсор перешёл на дочерний элемент. Интересно, что в таком случае будет сгенерировано `mouseout`. То есть курсор всё ещё на элементе, но мы получили `mouseout`!
+Представьте ситуацию -- курсор мыши перешёл на элемент. Сгенерировано событие `mouseover`. Затем курсор перешёл на дочерний элемент. Интересно, что в таком случае будет сгенерировано `mouseout`. То есть курсор всё ещё на элементе, но мы получили `mouseout`!
 
 ![](mouseover-to-child.png)
 
 Это выглядит странно, но легко объясняется.
 
-**По логике браузера, курсор мыши может быть только над одним элементом в любой момент времени - над самым глубоко вложенным (и имеющим самое большое значение z-index).**
+**По логике браузера, курсор мыши может быть только над одним элементом в любой момент времени - над самым глубоко вложенным (и/или имеющим приоритетное значение z-index).**
 
 Таким образом, если курсор переходит на другой элемент (пусть даже дочерний), то он покидает предыдущий. Достаточно просто.
 
@@ -91,37 +91,37 @@
 [codetabs height=360 src="mouseoverout-child"]
 
 1. При входе на синий элемент -- мы получили `mouseover [target: blue]`.
-2. Затем при переходе на красный -- `mouseout [target: blue]` (уход с родителя).
+2. Затем при переходе с синего на красный -- `mouseout [target: blue]` (уход с родителя).
 3. ...и сразу же `mouseover [target: red]`.
 
-Таким образом, для обработчика, который не принимает во внимание свойство `target`, ситуация выглядит так, как будто курсор ушёл с родительского элемента, запустив `mouseout` на строке `(2)`, а затем вернулся обратно, запустив `mouseover` на строке `(3)`.
+Таким образом, для обработчика, который не принимает во внимание свойство `target`, ситуация выглядит так, как будто курсор ушёл с родительского элемента, запустив `mouseout` `(2)`, а затем вернулся обратно, запустив `mouseover` `(3)`.
 
 Если постоянно передвигать курсор мышки с/на элемент, то мы получим много "ложных" срабатываний обработчиков. В простых случаях это может быть незаметно для пользователя, но в сложных случаях могут проявляться нежелательные побочные эффекты.
 
 Чтобы их избежать, можно использовать события `mouseenter/mouseleave`.
 
 ## События mouseenter и mouseleave
 
-События `mouseenter/mouseleave` похожи на `mouseover/mouseout`. Они тоже генерируются, когда курсор мыши заходит на элемент или покидает его.
+События `mouseenter/mouseleave` похожи на `mouseover/mouseout`. Они тоже генерируются, когда курсор мыши переходит на элемент или покидает его.
 
 Но есть и пара важных отличий:
 
-1. Переходы внутри элемента на дочерние элементы не считаются.
+1. Переходы внутри элемента по дочерним элементам не считаются.
 2. События `mouseenter/mouseleave` не всплывают.
 
 Эти события интуитивно очень понятны.
 
 Когда курсор становится над элементом -- генерируется `mouseenter`, и не имеет значения, где именно находится курсор внутри элемента. Событие `mouseleave` происходит, когда курсор покидает элемент.
 
-Если мы вернёмся к одному из прошлых примеров и в этот раз поставим обработчики событий `mouseenter/mouseleave` на синий `<div>`, а далее произведем те же действия -- мы увидим, что сгенерируются только события, связанные с движением курсора относительно синего `<div>`. Ничего не произойдет при переходе на красный `<div>` и обратно. Переходы с/на дочерние элементы игнорируются.
+Если мы вернёмся к одному из прошлых примеров и в этот раз поставим обработчики событий `mouseenter/mouseleave` на синий `<div>`, а далее произведём те же действия -- мы увидим, что сгенерируются только события, связанные с движением курсора относительно синего `<div>`. Ничего не произойдет при переходе на красный `<div>` и обратно. Переходы с/на дочерние элементы игнорируются.
 
 [codetabs height=340 src="mouseleave"]
 
 ## Делегирование событий
 
 События `mouseenter/leave` простые и легкие в использовании. Но они не всплывают. Таким образом, мы не можем их делегировать.
 
-Представьте ситуацию, что мы хотим обрабатывать события, сгенерированные при движении курсора по ячейкам таблицы. И в таблице сотни ячеек.
+Представьте ситуацию, когда мы хотим обрабатывать события, сгенерированные при движении курсора по ячейкам таблицы. И в таблице сотни ячеек.
 
 Очевидное решение -- определить обработчик на родительском элементе `<table>` и там обрабатывать возникающие события. Но `mouseenter/leave` не всплывают. То есть если событие происходит на ячейке `<td>`, то только обработчик на `<td>` может поймать его.
 
@@ -182,4 +182,4 @@ table.onmouseout = function(event) {
 - Быстрое движение мышкой может не запустить события `mouseover, mousemove, mouseout` на промежуточных элементах.
 - События `mouseover/out` и `mouseenter/leave` имеют дополнительное свойство: `relatedTarget`. Оно дополняет свойство `target` и содержит ссылку на элемент, с/на который мы переходим.
 - События `mouseover/out` запускаются, даже когда происходит переход с родительского на дочерний элемент. В этом случае предполагается, что курсор мыши может быть только над одним элементом в любой момент времени - над самым глубоко вложенным.
-- События `mouseenter/leave` не всплывают и не генерируются, когда курсор переходит на дочерний элемент. Они следят только за переходами с/на сам элемент, не принимая во внимание его дочерние элементы.
+- События `mouseenter/leave` не всплывают и не генерируются, когда курсор переходит на дочерний элемент. Они запускаются только при переходах с/на сам элемент, не принимая во внимание его дочерние элементы.