How to detect when a mouse moves away from the element

Question

mousemove is fired when mouse is moving over an element. How can I detect when the mouse is moving outside of an element? In other words, anywhere on the page besides the div in the snippet. Not when the mouse leaves but fires whenever the mouse is moving outside of the element.

const div = document.querySelector('div');

div.addEventListener('mousemove', function() {
    document.body.classList.add('mouse-moving');
 });

div {
  height: 200px;
  width: 300px;
  background-color: red;
}
.mouse-moving {
  background-color: green;
}

<div></div>

Answer 1

You can use onmouseover and onmouseout

const div = document.querySelector('div');

div.onmouseover = ()=> document.body.classList.add('mouse-moving');

 div.onmouseout = ()=> document.body.classList.remove('mouse-moving');

div {
  height: 200px;
  width: 300px;
  background-color: red;
}
.mouse-moving {
  background-color: green;
}

<div></div>

Answer 2

You can add the mousemove event listener to the document and check whether the event target is your div or not:

const div = document.querySelector('div');

document.addEventListener('mousemove', function(e) {
    if(e.target !== div) {
        div.textContent = "outside the div (" + e.clientX + ", " + e.clientY + ")";
    } else {
        div.textContent = "inside the div (" + e.clientX + ", " + e.clientY + ")";
    }
});

div {
  height: 200px;
  width: 300px;
  background-color: red;
}

<div></div>

Note: If the div contain other element, the test won't work. You'll have to check if one of the target's ancestors is your div:

document.addEventListener('mousemove', function(e) {
    var elm;
    for(elm = e.target; elm && elm !== div; elm = elm.parentElement)
        ;

    if(elm === div) {
        // inside div
    } else {
        // outside div
    }
});

const div = document.querySelector('div'),
      result = document.querySelector("#result");

document.addEventListener('mousemove', function(e) {
    var elm;
    for(elm = e.target; elm && elm !== div; elm = elm.parentElement)
        ;

    if(elm === div) {
        result.textContent = "inside the div (" + e.clientX + ", " + e.clientY + ")";
    } else {
        result.textContent = "outside the div (" + e.clientX + ", " + e.clientY + ")";
    }
});

div {
  height: 200px;
  width: 300px;
  background-color: red;
}

div > div {
  height: 50px;
  width: 50px;
  background-color: blue;
  margin: 5px;
}

<span id="result"></span>
<div>
  <div></div>
  <div></div>
</div>

Also, if the div's children are outside its boundary (due to some absolute positioning or something), the above method won't work, you'll have to check if the mouse coordinates are inside the div's bounding rectangle.