Элемент: событие mouseenter

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

Обратите внимание, что «перемещение в элемент» относится к положению элемента в дереве DOM, а не к его визуальному положению. Например, если дочерний элемент расположен так, что он находится вне родительского элемента, то перемещение в дочерний элемент вызовет mouseenter на родительском элементе, даже если указатель всё ещё находится за пределами родительского элемента.

Используйте имя события в методах, таких как addEventListener(), или установите свойство обработчика события.

addEventListener("mouseenter", (event) => {});

onmouseenter = (event) => {};

Объект MouseEvent. Наследует от UIEvent и Event.

Этот интерфейс также наследует свойства своих родительских интерфейсов, UIEvent и Event.

MouseEvent.altKey Только для чтения

Возвращает true , если клавиша alt была нажата при возникновении события мыши.

MouseEvent.button Только для чтения

Номер нажатой кнопки (если применимо) при возникновении события мыши.

MouseEvent.buttons Только для чтения

Нажатые кнопки (если есть) при возникновении события мыши.

MouseEvent.clientX Только для чтения

Координата X указателя мыши в координатах области просмотра.

MouseEvent.clientY Только для чтения

Координата Y указателя мыши в координатах области просмотра.

MouseEvent.ctrlKey Только для чтения

Возвращает true , если клавиша control была нажата при возникновении события мыши.

MouseEvent.layerX Нестандартный Только для чтения

Возвращает горизонтальную координату события относительно текущего слоя.

MouseEvent.layerY Нестандартный Только для чтения

Возвращает вертикальную координату события относительно текущего слоя.

MouseEvent.metaKey Только для чтения

Возвращает true , если клавиша meta была нажата при возникновении события мыши.

MouseEvent.movementX Только для чтения

Координата X указателя мыши относительно положения последнего события mousemove.

MouseEvent.movementY Только для чтения

Координата Y указателя мыши относительно положения последнего события mousemove.

MouseEvent.offsetX Только для чтения

Координата X указателя мыши относительно положения края отступа целевого узла.

MouseEvent.offsetY Только для чтения

Координата Y указателя мыши относительно положения края отступа целевого узла.

MouseEvent.pageX Только для чтения

Координата X указателя мыши относительно всего документа.

MouseEvent.pageY Только для чтения

Координата Y указателя мыши относительно всего документа.

MouseEvent.relatedTarget Только для чтения

Вторичная цель события, если она есть.

MouseEvent.screenX Только для чтения

Координата X указателя мыши в координатах экрана.

MouseEvent.screenY Только для чтения

Координата Y указателя мыши в координатах экрана.

MouseEvent.shiftKey Только для чтения

Возвращает true , если клавиша shift была нажата при возникновении события мыши.

MouseEvent.mozInputSource Нестандартный Только для чтения

Тип устройства, сгенерировавшего событие (одно из MOZ_SOURCE_* констант). Это позволяет, например, определить, было ли событие мыши сгенерировано фактической мышью или событием касания (что может повлиять на точность интерпретации координат, связанных с событием).

MouseEvent.webkitForce Нестандартный Только для чтения

Степень нажатия при щелчке.

MouseEvent.x Только для чтения

Псевдоним для MouseEvent.clientX.

MouseEvent.y Только для чтения

Псевдоним для MouseEvent.clientY.

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

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

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

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

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

В документации mouseover есть пример, иллюстрирующий разницу между событиями mouseover и 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

let enterEventCount = 0;
let 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) {
  // Create a new text node using the supplied text
  const newTextNode = document.createTextNode(text);

  // Create a new li element
  const newListItem = document.createElement("li");

  // Add the text node to the li element
  newListItem.appendChild(newTextNode);

  // Add the newly created list item to list
  unorderedList.appendChild(newListItem);
}

• Учебник: Введение в события
• mousedown
• mouseup
• mousemove
• click
• dblclick
• mouseover
• mouseout
• mouseleave
• contextmenu