Element: mouseenter event
=========================

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

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

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

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

![Диаграмма поведения mouseenter](/ru/docs/Web/API/Element/mouseenter_event/mouseenter.png)
 Одно событие `mouseenter` отправляется каждому элементу иерархии при их вводе. Здесь 4 события отправляются четырём элементам иерархии, когда указатель достигает текста.

![Диаграмма поведения mouseover](/ru/docs/Web/API/Element/mouseenter_event/mouseover.png)
 Одиночное событие наведения мыши `mouseover` отправляется в самый глубокий элемент дерева DOM, затем оно всплывает в иерархии, пока не будет отменено обработчиком или не достигнет корня.

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

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

Примеры
-------

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

### mouseenter

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

#### HTML


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


#### CSS

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


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


#### JavaScript


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

### Результат

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

| Specification |
| --- |
| UI Events # event-type-mouseenter |
| HTML Standard # handler-onmouseenter |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Introduction to events
* `mousedown`
* `mouseup`
* `mousemove` (en-US)
* `click`
* `dblclick` (en-US)
* `mouseover` (en-US)
* `mouseout` (en-US)
* `mouseenter`
* `mouseleave`
* `contextmenu`