Element: mouseenter event

Примечания по использованию

Хотя mouseenter похоже на mouseover, mouseenter отличается тем, что он не является bubble и не отправляется никаким потомкам, когда указатель перемещается из физического пространства одного из его потомков в его собственное физическое пространство.

Одно событие mouseenter отправляется каждому элементу иерархии при их вводе. Здесь 4 события отправляются четырём элементам иерархии, когда указатель достигает текста.

Одиночное событие наведения мыши mouseover отправляется в самый глубокий элемент дерева DOM, затем оно всплывает в иерархии, пока не будет отменено обработчиком или не достигнет корня.

При наличии глубокой иерархии количество отправляемых событий mouseover может быть довольно большим и вызывать значительные проблемы с производительностью. В таких случаях лучше обрабатывать события mouseenter.

В сочетании с соответствующим событием mouseleave (которое запускается в элементе, когда мышь покидает область содержимого), событие mouseenter действует очень похоже на псевдокласс CSS :hover.

Примеры

В документации по mouseover есть пример иллюстрирующий различия между mouseover и mouseenter.

mouseenter

В следующем тривиальном примере событие mouseenter используется для изменения границы элемента div, когда мышь входит в выделенное ему пространство. Затем он добавляет элемент в список с номером события mouseenter или mouseleave.

HTML

<div id="mouseTarget"> <ul id="unorderedList"> <li>No events yet!</li> </ul> </div> 

CSS

Стилизация div чтобы сделать его более заметным.

#mouseTarget { box-sizing: border-box; width: 15rem; border: 1px solid #333; } 

JavaScript

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); } 

Результат

Спецификации

Совместимость с браузерами

Смотрите также

• Introduction to events
• mousedown
• mouseup
• mousemove
• click
• dblclick
• mouseover
• mouseout
• mouseenter
• mouseleave
• contextmenu