1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
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>mouseover</code><span class="tlid-translation translation" lang="ru"><span title=""> может быть довольно большим и вызывать значительные проблемы с производительностью.</span> <span title="">В таких случаях лучше обрабатывать события </span></span><code>mouseenter</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>
|
