initial commit

1 files changed, 148 insertions, 0 deletions

diff --git a/files/ru/web/api/element/mouseenter_event/index.html b/files/ru/web/api/element/mouseenter_event/index.html
new file mode 100644
index 0000000000..075e92ec64
--- /dev/null
+++ b/files/ru/web/api/element/mouseenter_event/index.html
@@ -0,0 +1,148 @@
+---
+title: 'Element: mouseenter event'
+slug: Web/API/Element/mouseenter_event
+translation_of: Web/API/Element/mouseenter_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">Событие <strong><code>mouseenter</code></strong> вызывается в {{domxref("Element")}} </span><span class="tlid-translation translation" lang="ru"><span title="">когда указательное устройство (обычно мышь) изначально перемещается так, что его горячая точка находится в пределах элемента, в котором было запущено событие.</span></span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Всплывающее</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Отменяемое</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Интерфейс</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Свойство обработчика события</th>
+   <td>{{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Заметки_по_использованию">Заметки по использованию</h2>
+
+<p>Хотя <code>mouseenter</code> похоже на {{domxref("Element/mouseover_event", "mouseover")}}, <code>mouseenter</code> <span class="tlid-translation translation" lang="ru"><span title="">отличается тем, что он не является </span></span><a href="/ru/docs/Web/API/Event/bubbles">bubble</a> <span class="tlid-translation translation" lang="ru"><span title="">и не отправляется никаким потомкам, когда указатель перемещается из физического пространства одного из его потомков в его собственное физическое пространство.</span></span></p>
+
+<div style="column-width: 455px; border: 1px solid; padding: 5px; margin-bottom: 10px;">
+<div style="text-align: center;"><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5908/=mouseenter.png"></div>
+<span class="tlid-translation translation" lang="ru"><span title="">Одно событие </span></span> <code>mouseenter</code> <span class="tlid-translation translation" lang="ru"><span title="">отправляется каждому элементу иерархии при их вводе.</span> <span title="">Здесь 4 события отправляются четырем элементам иерархии, когда указатель достигает текста.</span></span>
+
+<div style="text-align: center;"><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5909/=mouseover.png"></div>
+<span class="tlid-translation translation" lang="ru"><span title="">Одиночное событие наведения мыши</span></span> <code>mouseover</code> <span class="tlid-translation translation" lang="ru"><span title="">отправляется в самый глубокий элемент дерева DOM, затем оно всплывает в иерархии, пока не будет отменено обработчиком или не достигнет корня.</span></span></div>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">При наличии глубокой иерархии количество отправляемых </span></span>событий <code>mouseenter</code><span class="tlid-translation translation" lang="ru"><span title=""> может быть довольно большим и вызывать значительные проблемы с производительностью.</span> <span title="">В таких случаях лучше прослушивать события </span></span><code>mouseover</code>.</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В сочетании с соответствующим событием</span></span> <code>mouseleave</code> (<span class="tlid-translation translation" lang="ru"><span title="">которое запускается в элементе, когда мышь покидает область содержимого</span></span>), событие <code>mouseenter</code> <span class="tlid-translation translation" lang="ru"><span title="">действует очень похоже на псевдокласс</span></span> CSS {{cssxref(':hover')}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В документации по <a href="/en-US/docs/Web/Events/mouseover#Example"><code>mouseover</code></a> есть пример илюстрирующий различия между <code>mouseover</code> и <code>mouseenter</code>.</p>
+
+<h3 id="mouseenter">mouseenter</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В следующем тривиальном примере событие <code>mouseenter</code> используется для изменения границы элемента <code>div</code>, когда мышь входит в выделенное ему пространство.</span> <span title="">Затем он добавляет элемент в список с номером события <code>mouseenter</code> или <code>mouseleave</code>.</span></span></p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div id='mouseTarget'&gt;
+ &lt;ul id="unorderedList"&gt;
+  &lt;li&gt;No events yet!&lt;/li&gt;
+ &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<p>Стилизация <code>div</code> чтобы сделать его более заметным.</p>
+
+<pre class="brush: css notranslate">#mouseTarget {
+  box-sizing: border-box;
+  width:15rem;
+  border:1px solid #333;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">var enterEventCount = 0;
+var leaveEventCount = 0;
+const mouseTarget = document.getElementById('mouseTarget');
+const unorderedList = document.getElementById('unorderedList');
+
+mouseTarget.addEventListener('mouseenter', e =&gt; {
+  mouseTarget.style.border = '5px dotted orange';
+  enterEventCount++;
+  addListItem('This is mouseenter event ' + enterEventCount + '.');
+});
+
+mouseTarget.addEventListener('mouseleave', e =&gt; {
+  mouseTarget.style.border = '1px solid #333';
+  leaveEventCount++;
+  addListItem('This is mouseleave event ' + leaveEventCount + '.');
+});
+
+function addListItem(text) {
+  // <span class="tlid-translation translation" lang="ru"><span title="">Создать новый текстовый узел, используя предоставленный текст</span></span>
+  var newTextNode = document.createTextNode(text);
+
+  // <span class="tlid-translation translation" lang="ru"><span title="">Создать новый элемент li</span></span>
+  var newListItem = document.createElement("li");
+
+  // Добавить текстовый узел к элементу li
+  newListItem.appendChild(newTextNode);
+
+  // Добавить вновь созданный элемент списка в список
+  unorderedList.appendChild(newListItem);
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('mouseenter')}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Element.mouseenter_event")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li>{{domxref("Element/mousedown_event", "mousedown")}}</li>
+ <li>{{domxref("Element/mouseup_event", "mouseup")}}</li>
+ <li>{{domxref("Element/mousemove_event", "mousemove")}}</li>
+ <li>{{domxref("Element/click_event", "click")}}</li>
+ <li>{{domxref("Element/dblclick_event", "dblclick")}}</li>
+ <li>{{domxref("Element/mouseover_event", "mouseover")}}</li>
+ <li>{{domxref("Element/mouseout_event", "mouseout")}}</li>
+ <li>{{domxref("Element/mouseenter_event", "mouseenter")}}</li>
+ <li>{{domxref("Element/mouseleave_event", "mouseleave")}}</li>
+ <li>{{domxref("Element/contextmenu_event", "contextmenu")}}</li>
+</ul>