【JavaScript】mouseoutイベントとは？マウスカーソルが離れた時にイベント実行

▼トリガーになる要素を取得(addEventListenerとonmouseoutプロパティで使用)
const elem = document.getElementById('js-elem'); // トリガーになる要素を取得

▼addEventListenerメソッド
elem.addEventListener('mouseout',function(){　// 第一引数にmouseoutを指定
  // 処理を記述
});

▼onmouseoutプロパティ
elem.onmouseout = function(){
  // 処理を記述
};

▼onmouseout属性
<button onmouseout="mouseoutEvent()">テキスト</button>

<script>
function mouseoutEvent(){
  // 処理を記述
};
</script>

<style>
#point{
  max-width:500px;
  text-align:center;
  margin:0 auto;
  padding:25px;
  background:#DDFFDD;
}
</style>

<div id="point">イベント実行で背景色が変化するよ！</div>

<script>
const point = document.getElementById('point');  // ①
  
point.addEventListener('mouseout',function(){  // ②
  this.style.background="#FFA500";  // ③
})
</script>