DOM - Mouseenter event (in a element)

About

mouseenter is an event that occurs when the mouse pointer enters an node (ie an html element)

See also the opposite event: mouseleave

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" onMouseEnter="console.log('mouse entered'); return false;" >
Put your mouse pointer on this box to trigger the event
</div>

IDL

With an event handler specified via the idl javascript property onmouseenter

.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 to trigger the event
</div>
document.querySelector('.box').onmouseenter = function(event){
  console.log("Mouse Enter dispatched");
  console.log("Bubble ?: "+event.bubbles);
}

Powered by ComboStrap