| <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> |
