Mouse moving events: mouseenter and mouseleave

mouseenter/mouseleave events are same as the mouseover/mouseout events.

mouseenter event trigger when the mouse pointer goes over to the element.
mouseleave event trigger when the mouse pointer leave the the element.

Difference between mouseenter/mouseleave vs mouseover/mouseout

1. mouseenter/mouseleave does not bubble.
2. Like the mouseout event is trigger when the mouse pointer goes over the child element where as the mouseleave event does not trigger on the child element.

When the mouse pointer enter on an element – the mouseenter event trigger, and it does not matter that where the mouse pointer goes inside the element like the pointer goes to the child element.

mouseleave event only trigger when the mouse pointer leave the element.

Example:

var element1 = document.getElementById("red");
var mouseStatus = document.getElementById("mouseStatus");

element1.onmouseenter = function (event) {
        var string = "mouseenter [" + "Target: " + event.target.id + "]\n";
        mouseStatus.value += string;
};

element1.onmouseleave = function (event) {
        var string = "mouseleave [" + "Target: " + event.target.id + "]\n";
        mouseStatus.value += string;
};

mouseenter/mouseleave live demo

As you seen in above image there is the two element. One is red element which is the parent element and another is the blue element which is the child element.

I registered the mouseenter and mouseleave event on the red element (Parent element) so whenever the mouse pointer goes over the red element or to the blue element mouseenter event will be occurred and whenever mouse leave the main red element (Parent element) mouseleave event will be occurred.

mouseleave event will be not occurred when the mouse pointer goes over to the blue element (Child element) it will be only occurred when the it leave the red element (Parent element) unlike the mouseover/mouseout event.