diff -r 322d0feea350 -r 89ef5ed3c48b src/cm/media/js/lib/yui/yui_3.10.3/docs/event/mouseenter.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/event/mouseenter.html Tue Jul 16 14:29:46 2013 +0200 @@ -0,0 +1,265 @@ + + + + + The mouseenter, mouseleave, and hover Events + + + + + + + + + + +
+
+

+
+ + Jump to Table of Contents + + +

The mouseenter, mouseleave, and hover Events

+
+
+
+
+

The event-mouseenter module adds support for "mouseenter" and + "mouseleave" events that are often preferable alternatives to "mouseover" + and "mouseout".

+ +

The event-hover module adds support for a "hover" event that combines + subscriptions to each of these two events, taking two callback + functions, one for when the mouse enters the subscribed node, and another + for when it leaves the node.

+
+ +

mouseover and mouseout are noisy

+ +

The mouseover and mouseout events bubble. That means with the following DOM structure...

+ +
<div id="hover-me">
+    <div class="header">
+        <button class="close">Close</button>
+    </div>
+    <div class="body">
+        ... more markup
+    </div>
+</div>
+ + +

...a mouseover subscription on #hover-me would be called three times when a user moved the mouse over the close button because

+ +
    +
  1. The user moused over #hover-me
    2. +
  2. The user moused over the <div> in #hover-me, and that mouseover event bubbled to #hover-me
    3. +
  3. The user moused over the close button, and that mouseover event bubbled to #hover-me
    4. +
+ +

Chances are, you don't care about any of these except the first. That's where mouseenter and mouseleave come in. They only fire when the e.target of the event is the node subscribed to. That means no noise.

+ +
YUI().use('event-mouseenter', 'transition', function (Y) {
+    var hoverMe = Y.one('#hover-me');
+
+    hoverMe.on('mouseenter', function () {
+        this.one('.header').transition('fadeIn');
+    });
+
+    hoverMe.on('mouseleave', function () {
+        this.one('.header').transition('fadeOut');
+    });
+});
+ + +

Though these events work by essentially not bubbling, you can still delegate mouseenter and mouseleave using node.delegate(...).

+ +
// The overHandler callback will be executed when any .hoverable
+// element is moused over.
+container.delegate('mouseenter', overHandler, '.hoverable');
+ + +

mouseenter + mouseleave == hover

+ +

It's common to pair mouseenter and mouseleave subscriptions (or +mouseover and mouseout for the uninitiated) to create an effect that only +lasts as long as the mouse is over an element. To make that easier, the +event-hover module adds a hover event. It accepts a second callback and +attaches the first to mouseenter and the second to mouseleave.

+ +
YUI().use('event-hover', 'transition', function (Y) {
+    function over() {
+        this.one('.header').transition('fadeIn');
+    }
+    function out() {
+        this.one('.header').transition('fadeOut');
+    }
+
+    // Two callbacks, `mouseenter` and `mouseleave`
+    Y.one('#hover-me').on('hover', over, out);
+});
+ + +

If you need to override the default this object assignment or bind arguments to a hover subscription, just add those arguments after the second callback.

+ +

Similarly, if you want to delegate the hover event, pass a CSS filter after the second callback.

+ +
// Default `this` to racerX
+mach5.on('hover', racerX.oilSlick, racerX.tireSpikes, racerX);
+
+// The delegate filter comes before the `this` override
+ruralTown.delegate('hover', ufo.scan, ufo.memoryWipe, '.person', ufo);
+ +
+
+
+ +
+
+ + + + + +
+
+

Examples

+
+ +
+ +
+
+ + + +
+
+

Examples That Use This Component

+
+ +
+ +
+
+ +
+
+
+
+ + + + + + + + + + +