mouseout

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

        
          
          const figure = document.querySelector('.figure')const text = document.querySelector('.text')figure.addEventListener('mouseout', function() {  let currentColor = getColor()  figure.style.backgroundColor = currentColor  text.style.color = currentColor})function getColor() {  const colors = ['#41E847', '#286C2D', '#2E9AFF', '#123E66', '#F498AD', '#623D45', '#FF8630', '#663613', '#FFD829', '#665610']  return colors[Math.floor(Math.random() * colors.length)]}
          const figure = document.querySelector('.figure')
const text = document.querySelector('.text')

figure.addEventListener('mouseout', function() {
  let currentColor = getColor()
  figure.style.backgroundColor = currentColor
  text.style.color = currentColor
})

function getColor() {
  const colors = ['#41E847', '#286C2D', '#2E9AFF', '#123E66', '#F498AD', '#623D45', '#FF8630', '#663613', '#FFD829', '#665610']
  return colors[Math.floor(Math.random() * colors.length)]
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

На практике

Секция статьи "На практике"

nlopin

Секция статьи "nlopin"

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

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