<html>
 <head>
  <style>
   body {
    margin: 0px;
    padding: 0px;
   }
   #mybox {
    padding: 20px;
    margin: 0px;
    border: 1px solid #000;
   }
   #mystatus {
    border: 1px solid #000;
    padding: 20px;
    margin: 0px;
   }
  </style>
  <script>
   var state = '';
   var hasLeave = false;
   function load() {
     state = 'initial';
     document.getElementById("mystatus").innerHTML = state;
     document.title = "onload";
   }
   function enter() {
     state += ',entered';
     document.getElementById("mystatus").innerHTML = state;
     document.title = "entered";
   }
   function leave() {
     hasLeave = true;
     state += ',left';
     document.getElementById("mystatus").innerHTML = state;
     document.title = "left";
   }
   function done() {
     state += ',done';
     document.getElementById("mystatus").innerHTML = state;
     document.title = hasLeave ? "with mouseleave" : "without mouseleave";
   }
  </script>
 </head>
 <body onload="load()">
  <div id="mybox" onmouseover="enter()" onmouseout="leave()"></div>
  <div id="mystatus"></div>
 </body>
</html>