Чем событие `mouseenter` отличается от `mouseover`?

Question

Accepted Answer

## Базовое понимание
Оба про «мышь вошла», но отличаются **всплытием** и тем, считается ли вход в потомка повторным входом родителя.

## Различия

- `mouseover` **всплывает**; срабатывает при входе в элемент и при переходе на потомков (родитель может получить событие снова).
- `mouseenter` **не всплывает**; для родителя одно «вход», пока указатель не покинул его целиком, переходы parent↔child не дёргают родителя повторно.

```js
el.addEventListener('mouseenter', () => console.log('enter'));
el.addEventListener('mouseover', () => console.log('over'));
```

Аналогично: `mouseleave` vs `mouseout`.

## Итог

Для «навели на блок целиком» — `mouseenter`/`mouseleave`. Если нужна делегизация и bubbling — `mouseover`/`mouseout` (с осторожностью к шуму от детей).

На практике для hover-эффектов карточки с вложенными иконками `mouseenter` спокойнее: меньше лишних срабатываний. Если вешаете делегирование на родителя — нужен всплывающий `mouseover`/`mouseout`, и часто фильтр по `event.target` / `relatedTarget`.