Javascript DOM onmouseout Event difference between the onmousemove, onmouseleave and onmouseout events

Introduction

This example demonstrates the difference between the onmousemove, onmouseleave and onmouseout events:

The onmousemove event occurs every time the mouse pointer is moved over the div element.

The mouseleave event only occurs when the mouse pointer is moved out of the div element.

The onmouseout event occurs when the mouse pointer is moved out of the div element, and when it leaves its child elements (p and span).

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
div {//  www.j  a v  a2  s . com
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  float: left;
  padding: 30px;
  text-align: center;
  background-color: lightgray;
}

p {
  background-color: white;
}
</style>
</head>
<body>

<div onmousemove="myMoveFunction()">
  <p>onmousemove: <br> <span id="demo">Mouse over and leave me!</span></p>
</div>

<div onmouseleave="myLeaveFunction()">
  <p>onmouseleave: <br> <span id="demo2">Mouse over and leave me!</span></p>
</div>

<div onmouseout="myOutFunction()">
  <p>onmouseout: <br> <span id="demo3">Mouse over and leave me!</span></p>
</div>

<script>
var x = 0;
var y = 0;
var z = 0;

function myMoveFunction() {
  document.getElementById("demo").innerHTML = z+=1;
}

function myLeaveFunction() {
  document.getElementById("demo2").innerHTML = x+=1;
}

function myOutFunction() {
  document.getElementById("demo3").innerHTML = y+=1;
}
</script>

</body>
</html>



PreviousNext

Related