В чем разница между событиями mouseleave и mouseout в JavaScript?

События mouseleave и mouseout в JavaScript связаны с движением курсора мыши, но имеют разные триггеры.

mouseleave:
Это событие срабатывает, когда курсор уходит за пределы элемента и всех его дочерних элементов. Оно не срабатывает, если курсор перемещается между дочерними элементами:

element.addEventListener('mouseleave', () => {
	console.log('Курсор покинул элемент'); 
});

mouseout:
Это событие срабатывает, когда курсор покидает элемент или любой из его дочерних элементов. Поэтому, если курсор перемещается между дочерними элементами, mouseout будет срабатывать каждый раз:

element.addEventListener('mouseout', () => {
	console.log('Курсор покинул элемент или его дочерний элемент'); 
});

Пример различия:

<div id="parent" style="width:200px; height:200px; background-color:lightblue;">
	<div id="child" style="width:100px; height:100px; background-color:lightgreen;"></div> 
</div> 
<script>
	const parent = document.getElementById('parent');  
	parent.addEventListener('mouseleave', () => console.log('mouseleave на родителе'));  
	parent.addEventListener('mouseout', () => console.log('mouseout на родителе'));  
	const child = document.getElementById('child');  
	child.addEventListener('mouseout', () => console.log('mouseout на дочернем элементе')); 
</script>

В этом примере, если курсор переместится с родительского элемента на дочерний, mouseout на родителе и дочернем элементе сработает, но mouseleave не сработает до тех пор, пока курсор не покинет родительский элемент полностью.

Итог:

• mouseleave удобен, когда нужно отследить полное покидание элемента, включая его дочерние элементы.

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