Is there a mouse enter event in javascript(only JavaScript, no jQuery to be used, please)?

When I do this, it gives no response.

window.onload = initAll;
function initAll(){
    if(window.addEventListener){
        document.getElementById('container').addEventListener( 'mouseenter', freeze , false);
    }
}

function freeze(){
    console.log("mouse entered")    
}

Could someone Please explain me the difference between 'mouseenter' and 'mouseover'? Is 'mouseover' an alternative for 'mouseenter'?

Help Appreciated!

Is there a mouse enter event in javascript(only JavaScript, no jQuery to be used, please)?

When I do this, it gives no response.

window.onload = initAll;
function initAll(){
    if(window.addEventListener){
        document.getElementById('container').addEventListener( 'mouseenter', freeze , false);
    }
}

function freeze(){
    console.log("mouse entered")    
}

Could someone Please explain me the difference between 'mouseenter' and 'mouseover'? Is 'mouseover' an alternative for 'mouseenter'?

Help Appreciated!

• javascript
• mouseevent
• mouseover
• mouseenter

• MDN Docs, great place to learn: mouseenter – epascarello Commented May 23, 2013 at 12:27
• stackoverflow./a/1104403/1053938 – jonhopkins Commented May 23, 2013 at 12:27
• stackoverflow./questions/6130737/mouseenter-without-jquery – Rachel Gallen Commented May 23, 2013 at 12:28
• 1 oh really? I don't think we need the brackets there, man! – Navneet Saini Commented May 23, 2013 at 12:38
• 1 Most of the time you can emulate IE's mouseenter by putting this code in your mouseover handler... if (this !== event.target) { return } This doesn't cover all situations. A full fix can be achieved pretty easily I think, but I don't remember exactly how of the top of my head. – user1106925 Commented May 23, 2013 at 12:45

4 Answers 4

Don't bother with onmouseenter, as this page states its specific to IE.

...Both onmouseenter and onmouseover fire when the mouse enters the boundary of an element. However, onmouseenter doesn't fire again (does not bubble) if the mouse enters a child element within this first element.

Try this for onmouseover:

yourObject.onmouseover=function()
    {
        //SomeJavaScriptCode
    };

Check this page for some good info on javascript mouse events.

Definitely, Mouseover is an alternative to mouseenter. It gives the UI Control of whatever dom element is being accessed. refer this for further explaination http://dean.edwards.name/weblog/2005/10/add-event/ mouseenter without JQuery

If you use jQuery, use mouseenter and mouseleave instead of mouseover and mouseout.

If you take the example above, everything inside the border is an element, let's call the one on the left with the word 'Name' in it #A. mouseenter will only fire when move your mouse inside the border #A. mouseover on the other hand will fire when you enter the border, again when you move your mouse past the grey background behind the '1', and again when you move your mouse over the word 'Name'. If you want the event to fire once, use mouseenter.

Mouse over is used when you just hover over something. Mouse enter (or mousedown) is to be used when a the mouse is clicked. A full list of javascript events can be found here