skip to main content

Element.mouseout

js

Кратко 🔗

Событие на HTML элементе. Происходит, когда пользователь передвигает курсор, который находится на элементе, за пределы элемента.

Событие является противоположным событию mouseover. Эти события часто используются в паре.

Как пишется 🔗

let divEl = document.getElementsByTagName("div")[0]
divEl.addEventListener("mouseout", function () {
alert("курсор вышел за границы элемента!")
})

Как понять 🔗

Подробнее о механизме событий читай в статье «События».

Событие проще всего понять на демо. При событии mouseout мы меняем цвет квадрата на случайный. Чтобы событие произошло, нужно навести курсор на квадрат, а затем убрать его:

See the Pen Событие mouseout by Nikolai Lopin (@Lopinopulos) on CodePen.

В работе 🔗

Николай,

🛠 С помощью этого события можно делать выпадающие списки и меню.

🛠 Есть очень похожее событие mouseleave, но оно не всплывает. Вместо этого для каждого элемента в цепочке вложенности (с самого вложенного элемента, на котором произошло событие до body) создается собственное событие. Если у тебя глубокое DOM-дерево, то таких событий может быть много. Это может привести к проблемам с производительностью.

Николай,