【JavaScript】mouseoverイベントとは？マウスカーソルが乗った時にイベント実行

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

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

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

▼onmouseover属性
<button onmouseover="mouseoverEvent()">テキスト</button>

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

<style>
#js-cursor{
  max-width:500px;
  margin:0 auto;
  padding:20px;
  text-align:center;
  background:#9DCCE0;
}
</style>

<div id="js-cursor" onmouseover = hoverCursor()>マウスカーソルを乗せてください</div> // ①

<script>
const cursor = document.getElementById('js-cursor');
  
function hoverCursor(){ // ②
  cursor.textContent = "イベントが実行されました！"; // ③
}
</script>