<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The mouseenter, mouseleave, and hover Events</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="../../build/yui/yui-min.js"></script>
</head>
<body>
<!--
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
-->
<div id="doc">
<div id="hd">
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
</div>
<a href="#toc" class="jump">Jump to Table of Contents</a>
<h1>The mouseenter, mouseleave, and hover Events</h1>
<div class="yui3-g">
<div class="yui3-u-3-4">
<div id="main">
<div class="content"><div class="intro">
<p>The <code>event-mouseenter</code> module adds support for "mouseenter" and
"mouseleave" events that are often preferable alternatives to "mouseover"
and "mouseout".</p>
<p>The <code>event-hover</code> 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.</p>
</div>
<h2 id="mouseover-and-mouseout-are-noisy"><code>mouseover</code> and <code>mouseout</code> are noisy</h2>
<p>The <code>mouseover</code> and <code>mouseout</code> events bubble. That means with the following DOM structure...</p>
<pre class="code prettyprint"><div id="hover-me">
<div class="header">
<button class="close">Close</button>
</div>
<div class="body">
... more markup
</div>
</div></pre>
<p>...a <code>mouseover</code> subscription on <code>#hover-me</code> would be called three times when a user moved the mouse over the close button because</p>
<ol>
<li>The user moused over #hover-me</li>
<li>The user moused over the <div> in #hover-me, and that <code>mouseover</code> event bubbled to #hover-me</li>
<li>The user moused over the close button, and that <code>mouseover</code> event bubbled to #hover-me</li>
</ol>
<p>Chances are, you don't care about any of these except the first. That's where <code>mouseenter</code> and <code>mouseleave</code> come in. They only fire when the <code>e.target</code> of the event is the node subscribed to. That means no noise.</p>
<pre class="code prettyprint">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');
});
});</pre>
<p>Though these events work by essentially <em>not</em> bubbling, you can still delegate <code>mouseenter</code> and <code>mouseleave</code> using <code>node.delegate(...)</code>.</p>
<pre class="code prettyprint">// The overHandler callback will be executed when any .hoverable
// element is moused over.
container.delegate('mouseenter', overHandler, '.hoverable');</pre>
<h2 id="hover"><code>mouseenter</code> + <code>mouseleave</code> == <code>hover</code></h2>
<p>It's common to pair <code>mouseenter</code> and <code>mouseleave</code> subscriptions (or
<code>mouseover</code> and <code>mouseout</code> for the uninitiated) to create an effect that only
lasts as long as the mouse is over an element. To make that easier, the
<code>event-hover</code> module adds a <code>hover</code> event. It accepts a second callback and
attaches the first to <code>mouseenter</code> and the second to <code>mouseleave</code>.</p>
<pre class="code prettyprint">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);
});</pre>
<p>If you need to override the default <code>this</code> object assignment or bind arguments to a <code>hover</code> subscription, just add those arguments after the second callback.</p>
<p>Similarly, if you want to delegate the <code>hover</code> event, pass a CSS filter after the second callback.</p>
<pre class="code prettyprint">// 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);</pre>
</div>
</div>
</div>
<div class="yui3-u-1-4">
<div class="sidebar">
<div id="toc" class="sidebox">
<div class="hd">
<h2 class="no-toc">Table of Contents</h2>
</div>
<div class="bd">
<ul class="toc">
<li>
<a href="#mouseover-and-mouseout-are-noisy"><code>mouseover</code> and <code>mouseout</code> are noisy</a>
</li>
<li>
<a href="#hover"><code>mouseenter</code> + <code>mouseleave</code> == <code>hover</code></a>
</li>
</ul>
</div>
</div>
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="Use the Event Utility to attach simple DOM event handlers.">
<a href="basic-example.html">Simple DOM Events</a>
</li>
<li data-description="Using the synthetic event API to create a DOM event that fires in response to arrow keys being pressed.">
<a href="synth-example.html">Creating an Arrow Event for DOM Subscription</a>
</li>
<li data-description="Supporting cross-device swipe gestures, using the event-move gesture events">
<a href="swipe-example.html">Supporting A Swipe Left Gesture</a>
</li>
</ul>
</div>
</div>
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples That Use This Component</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="Creating an accessible menu button using the Focus Manager Node Plugin, Event's delegation support and mouseenter event, along with the Overlay widget and Node's support for the WAI-ARIA Roles and States.">
<a href="../node-focusmanager/node-focusmanager-button.html">Accessible Menu Button</a>
</li>
<li data-description="Shows how to extend the base widget class, to create your own Widgets.">
<a href="../widget/widget-extend.html">Extending the Base Widget Class</a>
</li>
<li data-description="Example Photo Browser application.">
<a href="../dd/photo-browser.html">Photo Browser</a>
</li>
<li data-description="Portal style example using Drag & Drop Event Bubbling and Animation.">
<a href="../dd/portal-drag.html">Portal Style Example</a>
</li>
<li data-description="Use IO to request data over HTTP.">
<a href="../io/get.html">HTTP GET to request data</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script>
YUI.Env.Tests = {
examples: [],
project: '../assets',
assets: '../assets/event',
name: 'event',
title: 'The mouseenter, mouseleave, and hover Events',
newWindow: '',
auto: false
};
YUI.Env.Tests.examples.push('basic-example');
YUI.Env.Tests.examples.push('synth-example');
YUI.Env.Tests.examples.push('swipe-example');
YUI.Env.Tests.examples.push('node-focusmanager-button');
YUI.Env.Tests.examples.push('widget-extend');
YUI.Env.Tests.examples.push('photo-browser');
YUI.Env.Tests.examples.push('portal-drag');
YUI.Env.Tests.examples.push('get');
</script>
<script src="../assets/yui/test-runner.js"></script>
</body>
</html>