DOM - Mouseenter event (in a element) with Javascript

Event Listener

with an event listener

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

document.querySelector(".box").addEventListener("mouseenter", function(event){
   let actualColor = event.target.style.color;
   if (actualColor !== "blue"){
       event.target.style.borderColor = "blue";
       event.target.style.color = "blue";
       console.log("Mouse entered: The box is now blue");
   } else {
       console.log("Mouse entered: The box was already blue");
   }
});

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

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);
}