1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith<div class="intro">
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith <p>The `event-mouseenter` module adds support for "mouseenter" and
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith "mouseleave" events that are often preferable alternatives to "mouseover"
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith and "mouseout".</p>
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith <p>The `event-hover` module adds support for a "hover" event that combines
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith subscriptions to each of these two events, taking two callback
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith functions, one for when the mouse enters the subscribed node, and another
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith for when it leaves the node.</p>
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith<h2>`mouseover` and `mouseout` are noisy</h2>
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith<p>The `mouseover` and `mouseout` events bubble. That means with the following DOM structure...</p>
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith<div id="hover-me">
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith <div class="header">
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith <button class="close">Close</button>
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith <div class="body">
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith ... more markup
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith<p>...a `mouseover` subscription on `#hover-me` would be called three times when a user moved the mouse over the close button because</p>
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith <li>The user moused over #hover-me</li>
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith <li>The user moused over the <div> in #hover-me, and that `mouseover` event bubbled to #hover-me</li>
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith <li>The user moused over the close button, and that `mouseover` event bubbled to #hover-me</li>
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith<p>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.</p>
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke SmithYUI().use('event-mouseenter', function (Y) {
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith var hoverMe = Y.one('#hover-me');
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith hoverMe.on('mouseenter', function () {
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith this.one('.header').transition('fadeIn');
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith hoverMe.on('mouseleave', function () {
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith this.one('.header').transition('fadeOut');
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith<p>Though these events work by essentially <em>not</em> bubbling, you can still delegate `mouseenter` and `mouseleave` using `node.delegate(...)`.</p>
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith// The overHandler callback will be executed when any .hoverable
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith// element is moused over.
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smithcontainer.delegate('mouseenter', overHandler, '.hoverable');
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith<h2 id="hover">`mouseenter` + `mouseleave` == `hover`</h2>
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith<p>It's common to pair `mouseenter` and `mouseleave` subscriptions (or
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith`mouseover` and `mouseout` for the uninitiated) to create an effect that only
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smithlasts as long as the mouse is over an element. To make that easier, the
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith`event-hover` module adds a `hover` event. It accepts a second callback and
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smithattaches the first to `mouseenter` and the second to `mouseleave`.</p>
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke SmithYUI().use('event-mouseenter', function (Y) {
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith function over() {
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith this.one('.header').transition('fadeIn');
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith function out() {
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith this.one('.header').transition('fadeOut');
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith // Two callbacks, `mouseenter` and `mouseleave`
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith Y.one('#hover-me').on('hover', over, out);
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith<p>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.</p>
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith<p>Similarly, if you want to delegate the `hover` event, pass a CSS filter after the second callback.</p>
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith// Default `this` to racerX
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smithmach5.on('hover', racerX.oilSlick, racerX.tireSpikes, racerX);
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke Smith// The delegate filter comes before the `this` override
e9b01de77b1a53553e58caf4f0c5392735102fc1Luke SmithruralTown.delegate('hover', ufo.scan, ufo.memoryWipe, '.person', ufo);