Событие mouseenter вызывается в {{domxref("Element")}} когда указательное устройство (обычно мышь) изначально перемещается так, что его горячая точка находится в пределах элемента, в котором было запущено событие.
| Всплывающее | Нет |
|---|---|
| Отменяемое | Нет |
| Интерфейс | {{domxref("MouseEvent")}} |
| Свойство обработчика события | {{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}} |
Хотя mouseenter похоже на {{domxref("Element/mouseover_event", "mouseover")}}, mouseenter отличается тем, что он не является bubble и не отправляется никаким потомкам, когда указатель перемещается из физического пространства одного из его потомков в его собственное физическое пространство.
mouseenter отправляется каждому элементу иерархии при их вводе. Здесь 4 события отправляются четырём элементам иерархии, когда указатель достигает текста.
mouseover отправляется в самый глубокий элемент дерева DOM, затем оно всплывает в иерархии, пока не будет отменено обработчиком или не достигнет корня.При наличии глубокой иерархии количество отправляемых событий mouseover может быть довольно большим и вызывать значительные проблемы с производительностью. В таких случаях лучше обрабатывать события mouseenter.
В сочетании с соответствующим событием mouseleave (которое запускается в элементе, когда мышь покидает область содержимого), событие mouseenter действует очень похоже на псевдокласс CSS {{cssxref(':hover')}}.
В документации по mouseover есть пример иллюстрирующий различия между mouseover и mouseenter.
В следующем тривиальном примере событие mouseenter используется для изменения границы элемента div, когда мышь входит в выделенное ему пространство. Затем он добавляет элемент в список с номером события mouseenter или mouseleave.
<div id='mouseTarget'> <ul id="unorderedList"> <li>No events yet!</li> </ul> </div>
Стилизация div чтобы сделать его более заметным.
#mouseTarget {
box-sizing: border-box;
width:15rem;
border:1px solid #333;
}
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) {
// Создать новый текстовый узел, используя предоставленный текст
var newTextNode = document.createTextNode(text);
// Создать новый элемент li
var newListItem = document.createElement("li");
// Добавить текстовый узел к элементу li
newListItem.appendChild(newTextNode);
// Добавить вновь созданный элемент списка в список
unorderedList.appendChild(newListItem);
}
{{EmbedLiveSample('mouseenter')}}
{{Compat}}