mouseover vs mouseenter

by Subigya Panta

HTML

<div id="my_div">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div> 
<div>MouseEnter: <span id="mouseenter">0</span></div>
<div>MouseOver: <span id="mouseover">0</span></div>

CSS

#my_div
{
    padding: 0 40px 40px 0;
    background-color: #eee;
    margin-bottom: 20px;
    width: 180px;
    overflow: hidden;
}
#my_div > div
{
    float: left;
    margin: 40px 0 0 40px;
    height: 50px;
    width: 50px;
    background-color: #aaa;
}

JavaScript

$('#my_div').bind("mouseover mouseenter", function (e) {
    var el = $("#" + e.type);
    var n = + el.text();
    el.text(++n);
});