Mouseover, mouseout, mouseenter, mouseleave difference

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Do believe that the front-end development have heard of “ bubbling event ”., JavaScript programming "chapter ninth detail, But, Have a superficial knowledge of learning when the, No detail to understand, In recent work encountered a problem: there are many Li Tags, There are 2 buttons on the label, When and only when the mouse moved to the Li will display 2 buttons on, The following diagram, On the left is the default state, On the right is the mouse state, Start using   mouseover and mouseout , Results the mouse button at, The button will appear to flicker situation.

Then compare mouseover, mouseout, mouseenter, mouseleave difference between mouseover and mouseout found, will trigger the parent element in the mouse moved out of   mouseover, mouseout,   mouseenter, mouseleave will only trigger current method the mouse moved into and out of elements. In other words, it's not bubbling events, the former two are bubbling events.

The following is the detailed experimental:

<div id="mouseEventTest">
    <span id="parent">aaaaaaaaaaaaaaa<span id="child">bbbbbbbbbb</span></span>
</div>

Pages are as follows:

Simple CSS code:

span{
    padding: 10px;
    width: auto;
    line-height: 30px;
}

Parent and child   mouseover, mouseout, mouseenter, mouseleave methods are as follows:

    function parentMouseOver(e) {
        console.log('parentMouseOver');
    }
    function parentMouseOut(e) {
        console.log('parentMouseOut');
    }
    function childMouseOver(e) {
        console.log('childMouseOver');
    }
    function childMouseOut(e) {
        console.log('childMouseOut');
    }
    function parentMouseEnter(e) {
        console.log('parentMouseEnter');
    }
    function parentMouseLeave(e) {
        console.log('parentMouseLeave');
    }
    function childMouseEnter(e) {
        console.log('childMouseEnter');
    }
    function childMouseLeave(e) {
        console.log('childMouseLeave');
    }

Set two groups of binding:

1)mouseover, mouseout

    $("#parent").bind('mouseover',parentMouseOver);
    $("#parent").bind('mouseout',parentMouseOut);
    $("#child").bind('mouseover',childMouseOver);
    $("#child").bind('mouseout',childMouseOut);

2)mouseenter, mouseleave

    $("#parent").bind('mouseenter', parentMouseEnter);
    $("#parent").bind('mouseleave', parentMouseLeave);
    $("#child").bind('mouseenter', childMouseEnter);
    $("#child").bind('mouseleave', childMouseLeave);

Mode of operation is: the mouse moved from parent left, then right from the off.

The binding results as follows:

1)Group (four red box is respectively: enter the parent, from parent to child, from child to   parent, from parent):

   

2)Group:

The experimental results can be clearly seen in   mouseover, mouseout, mouseenter, mouseleave difference.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Abby at November 15, 2013 - 9:21 PM