マウスホバー マウスアウトした時の処理

バブリングなし mouseentr mouseleave
バブリングあり mouseover mouseout

<p>バブリングなし mouseentr mouseleave</p>
<div id="outer" style="background-color: cyan;width: 200px;height: 200px;">
  <span>ENTER_LEAVE 外側</span>
  <div id="inner" style="background-color: yellow;width:  100px;height: 100px;">
    <span>ENTER_LEAVE 内側</span>
  </div>
</div>

<p>バブリングあり mouseover mouseout</p>
<div id="outerb" style="background-color: magenta;width: 200px;height: 200px;">
  <span>OVER_OUT 外側</span>
  <div id="innerb" style="background-color: black;width:  100px;height: 100px;">
    <span>OVER_OUT 内側</span>
	</div>
</div>
const outer = document.getElementById("outer");
const inner = document.getElementById("inner");
const outerb = document.getElementById("outerb");
const innerb = document.getElementById("innerb");

outer.addEventListener("mouseenter", () => {
  console.log("OUTER_ENTER");
})
outer.addEventListener("mouseleave", () => {
  console.log("OUTER_LEAVE");
})

inner.addEventListener("mouseenter", () => {
  console.log("INNER_ENTER");
})
inner.addEventListener("mouseleave", () => {
  console.log("INNER_LEAVE");
})

outerb.addEventListener("mouseover", () => {
  console.log("OUTER_OVER");
})
outerb.addEventListener("mouseout", () => {
  console.log("OUTER_OUT");
})

innerb.addEventListener("mouseover", () => {
  console.log("INNER_OVER");
})
innerb.addEventListener("mouseout", () => {
  console.log("INNER_OUT");
})