diff options
Diffstat (limited to 'files/ru/web/api/element/mouseenter_event')
| -rw-r--r-- | files/ru/web/api/element/mouseenter_event/index.html | 148 |
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"><div id='mouseTarget'> + <ul id="unorderedList"> + <li>No events yet!</li> + </ul> +</div></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 => { + mouseTarget.style.border = '5px dotted orange'; + enterEventCount++; + addListItem('This is mouseenter event ' + enterEventCount + '.'); +}); + +mouseTarget.addEventListener('mouseleave', e => { + 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> |