Table of Contents

DOM - Mouseleave event (with Javascript)

About

mouseleave is an event that occurs when the mouse pointer leaves an node (ie an html element)

Example

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>
Rendered by WebCode

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);
}
Rendered by WebCode