One of the most common uses for a javascript library is to handle a “hover” or “mouseover” event. Often you might want to highlight some element on the screen when you hover over it, or trigger some display changes and “undo” them when you mouse out. You often see this with web based applications, where the idea of hovering over an element might show additional tools or allow you to “retweet” some post, etc.

Regardless of the details, you may find that your first try at “mouseovers” doesn’t behave the way you expect. Here’s an example:

Click to the “result” tab and mouse over the first set of elements. Look at the mouseover/mouseout counts. Move your mouse around inside one of the green boxes. Look at all those “extra” events. Part of this has to do with event bubbling and such, but for now let’s just assume this is not your desired behavior. Perhaps you do some logging of events, and you don’t want all that extra noise.

YUI has a neat trick to avoid all this – and is similar in a way to jQuery in this respect. You can choose to change your code slightly to use some non-standard (but often used) events called mouseenter and mouseleave. These events will only be triggered when the mouse enters the bounding box of the element, or leaves the bounding box – regardless of the contents. Compare the code below with above in terms of the number of “mouseouts” and “mouseenters” :

See how much less “noisy” it is? It also makes a bit more sense code-wise, because you really don’t care if the mouse moves over other elements inside the box – effectively triggering a mouseout/mouseover combo, you only care if the mouse moves OUTSIDE of your particular box.

So, long story short — if you want to have less “noisy” code (and more performant) and accept having a bit of an abstraction in terms of events, then I suggest you use the “mouseenter” and “mouseeleave” events instead of the more traditional “mouseover” and “mouseout” — simply because they are closer to what you really meant for the code to do.

If you want to read more about this, go over to the YUI Docs page.

NOTE: you can simplify your code even more with “hover”, which takes two methods – one for the “enter” and one for the “exit” . Read more over at the YUI Doc site.