msafronov/onmousemove without children events

## onmousemove without children events
<!DOCTYPE html>
<html>
  <head>
    <title>Page</title>

    <style>
      .parent {
        width: 500px;
        height: 500px;
        border: 1px solid black;
      }

      .child1 {
        width: 300px;
        height: 300px;
        background-color: green;
      }

      .child2 {
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="parent">
        <div class="child1">
          <div class="child2"></div>
        </div>
      </div>
    </div>

    <script>
      var parent = document.querySelector('.parent');

      function mouseEntry(e) {
        if (e.target !== e.currentTarget) return;
        if (!e.relatedTarget) return;
        if (!e.relatedTarget.contains(e.currentTarget)) return;

        console.log(e.type, e.target, e.currentTarget);
      };

      parent.onmouseover = mouseEntry;
      parent.onmouseout = mouseEntry;
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Page</title>

	<style>
	.parent {
	width: 500px;
	height: 500px;
	border: 1px solid black;
	}

	.child1 {
	width: 300px;
	height: 300px;
	background-color: green;
	}

	.child2 {
	width: 100px;
	height: 100px;
	background-color: red;
	}
	</style>
	</head>
	<body>
	<div>
	<div class="parent">
	<div class="child1">
	<div class="child2"></div>
	</div>
	</div>
	</div>

	<script>
	var parent = document.querySelector('.parent');

	function mouseEntry(e) {
	if (e.target !== e.currentTarget) return;
	if (!e.relatedTarget) return;
	if (!e.relatedTarget.contains(e.currentTarget)) return;

	console.log(e.type, e.target, e.currentTarget);
	};

	parent.onmouseover = mouseEntry;
	parent.onmouseout = mouseEntry;
	</script>
	</body>
	</html>