Element: mouseenter event

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

Событие mouseenter вызывается в Element когда указательное устройство (обычно мышь) изначально перемещается так, что его горячая точка находится в пределах элемента, в котором было запущено событие.

Всплывающее Нет
Отменяемое Нет
Интерфейс MouseEvent
Свойство обработчика события onmouseenter

Заметки по использованию

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

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

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

В сочетании с соответствующим событием 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);  
}

Результат

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

Спецификация Статус
UI Events
Определение 'mouseenter' в этой спецификации.
Рабочий черновик
Document Object Model (DOM) Level 3 Events Specification
Определение 'mouseenter' в этой спецификации.
Устаревшая

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
mouseenter eventChrome Полная поддержка 30Edge Полная поддержка 12Firefox Полная поддержка 10IE Полная поддержка 5.5Opera Полная поддержка 17Safari Полная поддержка 6.1WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 30Firefox Android Полная поддержка 10Opera Android Полная поддержка 18Safari iOS Полная поддержка 6.1Samsung Internet Android Полная поддержка 2.0

Легенда

Полная поддержка  
Полная поддержка

Смотри также