What's the mouse leave event and how to use it

HTML attribute event handler

with an html attribute on handler

.box {
   margin: 1rem;
   padding: 1rem;
   border: 1px solid steelblue;
   border-radius: 10px;
   width: fit-content;
}

<div class="box" onMouseLeave="console.log('mouse leaves'); return false;" >
Put your mouse pointer on this box and leave it to trigger the event
</div>

IDL

With an event handler specified via the idl javascript property onmouseleave

.box {
   margin: 1rem;
   padding: 1rem;
   border: 1px solid steelblue;
   border-radius: 10px;
   width: fit-content;
}

<div class="box">
Put your mouse pointer on this box and leave it to trigger the event
</div>

document.querySelector('.box').onmouseleave = function(event){
  console.log("Mouse Leave dispatched");
  console.log("Bubble ?: "+event.bubbles);
}