How to detect mousein and mouseleave in pure JavaScript?
javascript
Solution
`mouseenter` and `mouseleave` are proprietary MS events (that are actually pretty nice). If `myDiv` has no children, using `mouseover` / `mouseout` will have exactly the same effect.
http://jsfiddle.net/qHfJD/1/
Note: this original question and answer were very old and from a time when `mouseenter` and `mouseleave` were not well supported outside of IE. All modern browsers have supported these events on elements for quite some time now. They are generally preferred over `mouseover`/`mouseout` because the latter will trigger for each child of the element with the event listener in addition to the element itself.
Problem
I can't use jQuery for this part of the project due to various reasons. SO I need to detect this in vanilla js. I tried this but it doesn't work: http://jsfiddle.net/qHfJD/ ``` var myDiv = document.getElementById('foo'); myDiv.onmouseenter = function() { alert('entered'); } myDiv.onmouseleave = function() { alert('left'); } ```