|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>Event</title> |
|
|
6 |
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
|
7 |
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
|
8 |
<link rel="stylesheet" href="../assets/css/main.css"> |
|
|
9 |
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
|
10 |
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
|
11 |
<script src="../../build/yui/yui-min.js"></script> |
|
|
12 |
|
|
|
13 |
</head> |
|
|
14 |
<body> |
|
|
15 |
<!-- |
|
|
16 |
<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> |
|
|
17 |
--> |
|
|
18 |
<div id="doc"> |
|
|
19 |
<div id="hd"> |
|
|
20 |
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
|
21 |
</div> |
|
|
22 |
|
|
|
23 |
<a href="#toc" class="jump">Jump to Table of Contents</a> |
|
|
24 |
|
|
|
25 |
|
|
|
26 |
<h1>Event</h1> |
|
|
27 |
<div class="yui3-g"> |
|
|
28 |
<div class="yui3-u-3-4"> |
|
|
29 |
<div id="main"> |
|
|
30 |
<div class="content"><style> |
|
|
31 |
h4 code { |
|
|
32 |
text-transform: none; |
|
|
33 |
} |
|
|
34 |
.yui3-skin-sam td { |
|
|
35 |
background-color: #E6E9F5; |
|
|
36 |
} |
|
|
37 |
.yui3-skin-sam .yui3-datatable td { |
|
|
38 |
background-color: transparent; |
|
|
39 |
} |
|
|
40 |
</style> |
|
|
41 |
|
|
|
42 |
<div class="intro component"> |
|
|
43 |
<p>The YUI Event Utility provides APIs for working with the browser's DOM |
|
|
44 |
event system. It simplifies tasks like subscribing to button <code>click</code>s or |
|
|
45 |
canceling <form> <code>submit</code>s to, for example, allow sending data to the |
|
|
46 |
server via ajax.</p> |
|
|
47 |
|
|
|
48 |
<p>In addition, the "Synthetic event" system supplies <em>entirely new</em> |
|
|
49 |
DOM events to subscribe to as well as fixing events that behave differently |
|
|
50 |
across browsers. Implementers can create their own DOM events triggered by |
|
|
51 |
specific user actions or other environmental criteria.</p> |
|
|
52 |
|
|
|
53 |
<p>The API for working with DOM events is provided by the EventTarget class, |
|
|
54 |
which also services the Custom event infrastructure that is used throughout |
|
|
55 |
YUI. Read more about working with custom events <a |
|
|
56 |
href="../event-custom/index.html">in the EventTarget user guide</a>.</p> |
|
|
57 |
</div> |
|
|
58 |
|
|
|
59 |
<h2 id="getting-started">Getting Started</h2> |
|
|
60 |
|
|
|
61 |
<p> |
|
|
62 |
To include the source files for Event and its dependencies, first load |
|
|
63 |
the YUI seed file if you haven't already loaded it. |
|
|
64 |
</p> |
|
|
65 |
|
|
|
66 |
<pre class="code prettyprint"><script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script></pre> |
|
|
67 |
|
|
|
68 |
|
|
|
69 |
<p> |
|
|
70 |
Next, create a new YUI instance for your application and populate it with the |
|
|
71 |
modules you need by specifying them as arguments to the <code>YUI().use()</code> method. |
|
|
72 |
YUI will automatically load any dependencies required by the modules you |
|
|
73 |
specify. |
|
|
74 |
</p> |
|
|
75 |
|
|
|
76 |
<pre class="code prettyprint"><script> |
|
|
77 |
// Create a new YUI instance and populate it with the required modules. |
|
|
78 |
YUI().use('event', function (Y) { |
|
|
79 |
// Event is available and ready for use. Add implementation |
|
|
80 |
// code here. |
|
|
81 |
}); |
|
|
82 |
</script></pre> |
|
|
83 |
|
|
|
84 |
|
|
|
85 |
<p> |
|
|
86 |
For more information on creating YUI instances and on the |
|
|
87 |
<a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_use"><code>use()</code> method</a>, see the |
|
|
88 |
documentation for the <a href="../yui/index.html">YUI Global Object</a>. |
|
|
89 |
</p> |
|
|
90 |
|
|
|
91 |
|
|
|
92 |
<h2 id="the-basics">The Basics</h2> |
|
|
93 |
|
|
|
94 |
<h4 id="listening-for-events">Listening for events</h4> |
|
|
95 |
<pre class="code prettyprint">// Step 1. Capture a button node |
|
|
96 |
var button = Y.one("#readygo"); |
|
|
97 |
|
|
|
98 |
// Step 2. Subscribe to its click event with a callback function |
|
|
99 |
button.on("click", function (e) { |
|
|
100 |
|
|
|
101 |
// Step 3. do stuff when the button is clicked |
|
|
102 |
|
|
|
103 |
});</pre> |
|
|
104 |
|
|
|
105 |
|
|
|
106 |
<p><code>on(<em>type</em>, <em>callback</em>)</code> is the main |
|
|
107 |
subscription method, and is available on every <a href="../node/"><code>Node</code></a> |
|
|
108 |
and <a href="../node/#nodelist"><code>NodeList</code></a>.</p> |
|
|
109 |
|
|
|
110 |
<p>Replace "click" with <a href="#event-whitelist">any other event name</a> to subscribe to that event.</p> |
|
|
111 |
|
|
|
112 |
<h4 id="the-callback-and-the-event-object">The Callback and the Event Object</h4> |
|
|
113 |
|
|
|
114 |
<pre class="code prettyprint">button.on('click', function (e) { |
|
|
115 |
// `this` is the button Node, NOT the DOM element |
|
|
116 |
this.get('id'); // ==> 'readygo' (from <button id="readygo">...</button>) |
|
|
117 |
|
|
|
118 |
// Event properties that point to the DOM are also Node instances |
|
|
119 |
e.target.get('id'); // => 'readygo' |
|
|
120 |
|
|
|
121 |
// Stop the event's default behavior |
|
|
122 |
e.preventDefault(); |
|
|
123 |
|
|
|
124 |
// Stop the event from bubbling up the DOM tree |
|
|
125 |
e.stopPropagation(); |
|
|
126 |
});</pre> |
|
|
127 |
|
|
|
128 |
|
|
|
129 |
<p>Subscribed callbacks are passed a <a href="#facade-properties">normalized |
|
|
130 |
event object</a> as their first argument.</p> |
|
|
131 |
|
|
|
132 |
<p>The keyword "<code>this</code>" in the callback will refer to the Node or NodeList |
|
|
133 |
that you subscribed from.</p> |
|
|
134 |
|
|
|
135 |
<h4 id="epreventdefault-and-estoppropagation"><code>e.preventDefault()</code> and <code>e.stopPropagation()</code></h4> |
|
|
136 |
|
|
|
137 |
<p>Many events have a default behavior, such as the <code>submit</code> event serializing |
|
|
138 |
form data and making a new page request. Disable this behavior with |
|
|
139 |
<code>e.preventDefault()</code>.</p> |
|
|
140 |
|
|
|
141 |
<pre class="code prettyprint">function setFilter(e) { |
|
|
142 |
// Stop the link from loading the href page |
|
|
143 |
e.preventDefault(); |
|
|
144 |
|
|
|
145 |
// Now do my own thing instead |
|
|
146 |
var url = this.get('href').replace(/page/, 'partial'); |
|
|
147 |
|
|
|
148 |
Y.one('#contentArea').load(url); |
|
|
149 |
|
|
|
150 |
// `return false` is supported, but not preferred. use e.preventDefault() |
|
|
151 |
return false; |
|
|
152 |
} |
|
|
153 |
|
|
|
154 |
Y.one('#table-filter-link').on('click', setFilter);</pre> |
|
|
155 |
|
|
|
156 |
|
|
|
157 |
<p>Most events can be listened for on the specific element that originates them |
|
|
158 |
<em>or from any of their parent elements</em>, all the way up to the |
|
|
159 |
<code>document</code>. Prevent dispatching the event to subscriptions bound to elements |
|
|
160 |
further up the DOM tree with <code>e.stopPropagation()</code>. In practice, this is |
|
|
161 |
rarely useful.</p> |
|
|
162 |
|
|
|
163 |
<p>Returning <code>false</code> from a callback will also stop the propagation of the |
|
|
164 |
event, which may cause unintended side effects.</p> |
|
|
165 |
|
|
|
166 |
<p><code>e.stopPropagation()</code> won't prevent the execution of other subscribers |
|
|
167 |
listening to the same element, only elements further up the DOM tree. If you |
|
|
168 |
need to stop all execution, use <code>e.stopImmediatePropagation()</code> or |
|
|
169 |
<code>e.halt(true)</code>. The latter will also call <code>e.preventDefault()</code>.</p> |
|
|
170 |
|
|
|
171 |
<h4 id="detaching-subscriptions">Detaching subscriptions</h4> |
|
|
172 |
|
|
|
173 |
<p><code>node.on()</code> and all |
|
|
174 |
<a href="#more">other subscription methods</a> return a |
|
|
175 |
subscription object that can be used to unbind that subscription. Node also |
|
|
176 |
supports a <code>detach()</code> method and <a href="#detach-methods">other ways to cleanup |
|
|
177 |
subscriptions</a>.</p> |
|
|
178 |
|
|
|
179 |
<pre class="code prettyprint">// on() returns a subscription handle... |
|
|
180 |
var sub = button.on("click", handleClick); |
|
|
181 |
|
|
|
182 |
// ...that can be used to unbind the subscription |
|
|
183 |
sub.detach(); |
|
|
184 |
|
|
|
185 |
// Alternately, use the Node's detach() method |
|
|
186 |
button.detach("click", handleClick);</pre> |
|
|
187 |
|
|
|
188 |
|
|
|
189 |
<p>Just this should take care of most of the simple event bindings you'll need. |
|
|
190 |
There's <a href="#more">a lot more you can do</a>, though, so read on!</p> |
|
|
191 |
|
|
|
192 |
<h2 id="modules">What to <code>use()</code></h2> |
|
|
193 |
|
|
|
194 |
<p> |
|
|
195 |
Before we get into <a href="#more">more API goodies</a>, let's talk about |
|
|
196 |
the Event Utility's module breakdown. |
|
|
197 |
</p> |
|
|
198 |
|
|
|
199 |
<p> |
|
|
200 |
For starters, in most cases <em>you probably won't <code>use('event')</code></em>. |
|
|
201 |
The core DOM event system ("event-base") is required by the "node-base" |
|
|
202 |
module, which itself if required by just about everything in YUI. So you |
|
|
203 |
probably already have the DOM event API and didn't know it! |
|
|
204 |
</p> |
|
|
205 |
|
|
|
206 |
<p>Here is the full breakdown of modules in the DOM event system:</p> |
|
|
207 |
|
|
|
208 |
<table> |
|
|
209 |
<thead> |
|
|
210 |
<tr> |
|
|
211 |
<th><code>use("______", ...)</code></th> |
|
|
212 |
<th>What's in it?</th> |
|
|
213 |
</tr> |
|
|
214 |
</thead> |
|
|
215 |
<tbody> |
|
|
216 |
<tr> |
|
|
217 |
<td><a href="http://yuilibrary.com/yui/docs/api/module_event-base.html"><code>event-base</code></a></td> |
|
|
218 |
<td> |
|
|
219 |
<p> |
|
|
220 |
The core DOM event subscription system as well as the DOM |
|
|
221 |
lifecycle events <a href="domready.html"><code>domready</code>, |
|
|
222 |
<code>contentready</code>, and <code>available</code></a>. Notably, it does NOT |
|
|
223 |
include |
|
|
224 |
</p> |
|
|
225 |
<ul> |
|
|
226 |
<li>event delegation</li> |
|
|
227 |
<li>event simulation</li> |
|
|
228 |
<li>synthetic events</li> |
|
|
229 |
</ul> |
|
|
230 |
|
|
|
231 |
<p>If you've <code>use()</code>d anything, you probably have this already.</p> |
|
|
232 |
</td> |
|
|
233 |
</tr> |
|
|
234 |
<tr> |
|
|
235 |
<td><a href="http://yuilibrary.com/yui/docs/api/module_event.html"><code>event</code></a></td> |
|
|
236 |
<td> |
|
|
237 |
A rollup of all modules below except |
|
|
238 |
<ul> |
|
|
239 |
<li>"event-simulate"</li> |
|
|
240 |
<li>"node-event-simulate"</li> |
|
|
241 |
<li>"node-event-delegate" (which is in the "node" rollup)</li> |
|
|
242 |
</ul> |
|
|
243 |
</td> |
|
|
244 |
</tr> |
|
|
245 |
<tr> |
|
|
246 |
<td><a href="http://yuilibrary.com/yui/docs/api/module_event-delegate.html"><code>event-delegate</code></a> & |
|
|
247 |
<br> |
|
|
248 |
<a style="white-space: nowrap;" href="http://yuilibrary.com/yui/docs/api/module_node-event-delegate.html"><code>node-event-delegate</code></a></td> |
|
|
249 |
<td> |
|
|
250 |
Adds the <code>Y.delegate(...)</code> and <code>node.delegate(...)</code> methods, |
|
|
251 |
respectively, for <a href="#delegation">event delegation</a> |
|
|
252 |
convenience. |
|
|
253 |
</td> |
|
|
254 |
</tr> |
|
|
255 |
<tr> |
|
|
256 |
<td><a href="http://yuilibrary.com/yui/docs/api/module_event-simulate.html"><code>event-simulate</code></a> & |
|
|
257 |
<br> |
|
|
258 |
<a style="white-space: nowrap;" href="http://yuilibrary.com/yui/docs/api/module_node-event-simulate.html"><code>node-event-simulate</code></a></td> |
|
|
259 |
</td> |
|
|
260 |
<td> |
|
|
261 |
<p> |
|
|
262 |
Adds <code>Y.Event.simulate(...)</code> and <code>node.simulate(...)</code> for |
|
|
263 |
<a href="#simulate">triggering native DOM events</a> for |
|
|
264 |
unit testing. |
|
|
265 |
</p> |
|
|
266 |
<p> |
|
|
267 |
<strong>Note: <a href="simulate.html#faking">Faking DOM events |
|
|
268 |
should not be used in user facing code</a></strong>. |
|
|
269 |
</p> |
|
|
270 |
</td> |
|
|
271 |
</tr> |
|
|
272 |
<tr> |
|
|
273 |
<td><a href="http://yuilibrary.com/yui/docs/api/module_event-synthetic.html"><code>event-synthetic</code></a></td> |
|
|
274 |
<td> |
|
|
275 |
<p>Supplies the infrastructure for creating new DOM events, "fixing" |
|
|
276 |
existing events with undesirable or inconsistent behavior, and |
|
|
277 |
<a href="synths.html">all sorts of other things</a>.</p> |
|
|
278 |
|
|
|
279 |
<p>All of the modules below are synthetics.</p> |
|
|
280 |
</td> |
|
|
281 |
</tr> |
|
|
282 |
<tr> |
|
|
283 |
<td><a href="http://yuilibrary.com/yui/docs/api/module_event-flick.html"><code>event-flick</code></a></td> |
|
|
284 |
<td> |
|
|
285 |
Adds a <a href="touch.html#flick">"flick" event</a> for touch or |
|
|
286 |
mouse interaction. |
|
|
287 |
</td> |
|
|
288 |
</tr> |
|
|
289 |
<tr> |
|
|
290 |
<td><a href="http://yuilibrary.com/yui/docs/api/module_event-focus.html"><code>event-focus</code></a></td> |
|
|
291 |
<td> |
|
|
292 |
<a href="focus.html">Fixes <code>focus</code> and <code>blur</code> events</a> to bubble |
|
|
293 |
(for delegation). |
|
|
294 |
</td> |
|
|
295 |
</tr> |
|
|
296 |
<td><a href="gestures.html"><code>event-gestures</code></a></td> |
|
|
297 |
<td> |
|
|
298 |
<p>The gestures rollup provides gesture events such as "flick" and "gesturemove", which normalize user interactions across touch and mouse or pointer based input devices. It contains the following modules:</p> |
|
|
299 |
|
|
|
300 |
<ul> |
|
|
301 |
<li>"event-touch"</li> |
|
|
302 |
<li>"event-move"</li> |
|
|
303 |
<li>"event-flick"</li> |
|
|
304 |
</ul> |
|
|
305 |
|
|
|
306 |
<p>In the future, may contain more gesture abstraction modules.</p> |
|
|
307 |
</td> |
|
|
308 |
<tr> |
|
|
309 |
<td><a href="http://yuilibrary.com/yui/docs/api/module_event-hover.html"><code>event-hover</code></a></td> |
|
|
310 |
<td> |
|
|
311 |
Adds a <a href="mouseenter.html#hover">"hover" event</a> which |
|
|
312 |
binds to two callbacks, one for the start, and one for the end of a |
|
|
313 |
mouse hover. |
|
|
314 |
</td> |
|
|
315 |
</tr> |
|
|
316 |
<tr> |
|
|
317 |
<td><a href="http://yuilibrary.com/yui/docs/api/module_event-key.html"><code>event-key</code></a></td> |
|
|
318 |
<td> |
|
|
319 |
Adds a <a href="key.html">"key" event</a> which listens for |
|
|
320 |
specific, implementer defined, keys being pressed by the user. |
|
|
321 |
</td> |
|
|
322 |
</tr> |
|
|
323 |
<tr> |
|
|
324 |
<td><a href="http://yuilibrary.com/yui/docs/api/module_event-mouseenter.html"><code>event-mouseenter</code></a></td> |
|
|
325 |
<td> |
|
|
326 |
Adds <a href="mouseenter.html">"mouseenter" and "mouseleave" |
|
|
327 |
events</a>. You probably want to use these instead of "mouseover" |
|
|
328 |
and "mouseout". |
|
|
329 |
</td> |
|
|
330 |
</tr> |
|
|
331 |
<tr> |
|
|
332 |
<td><a href="http://yuilibrary.com/yui/docs/api/module_event-mousewheel.html"><code>event-mousewheel</code></a></td> |
|
|
333 |
<td> |
|
|
334 |
<p>Adds a "mousewheel" event for monitoring users scrolling the |
|
|
335 |
window with the mousewheel. Event facades passed to the callback |
|
|
336 |
will have an <code>e.wheelDelta</code> property corresponding to the amount of |
|
|
337 |
scrolling.</p> |
|
|
338 |
|
|
|
339 |
<p>Currently, this event can only be subscribed with |
|
|
340 |
<code>Y.on("mousewheel", callback)</code>;</p> |
|
|
341 |
</td> |
|
|
342 |
</tr> |
|
|
343 |
<tr> |
|
|
344 |
<td><a href="http://yuilibrary.com/yui/docs/api/module_event-move.html"><code>event-move</code></a></td> |
|
|
345 |
<td> |
|
|
346 |
Adds <a href="touch.html#move">"gesturemovestart", "gesturemove", |
|
|
347 |
and "gesturemoveend" events</a> that serve as abstractions over |
|
|
348 |
mouse and touch events, forking internally based on the client |
|
|
349 |
device. |
|
|
350 |
</td> |
|
|
351 |
</tr> |
|
|
352 |
<tr> |
|
|
353 |
<td><a href="http://yuilibrary.com/yui/docs/api/module_event-outside.html"><code>event-outside</code></a></td> |
|
|
354 |
<td> |
|
|
355 |
Adds a <a href="outside.html">"clickoutside" and several other |
|
|
356 |
outside events</a> to trigger behavior based on actions taken |
|
|
357 |
outside a specific element. |
|
|
358 |
</td> |
|
|
359 |
</tr> |
|
|
360 |
<tr> |
|
|
361 |
<td><a href="http://yuilibrary.com/yui/docs/api/module_event-resize.html"><code>event-resize</code></a></td> |
|
|
362 |
<td> |
|
|
363 |
<p>Adds a "windowresize" event that only fires after a user has |
|
|
364 |
stopped dragging a window's resize handle. This normalizes the |
|
|
365 |
<code>window.onresize</code> event across browsers.</p> |
|
|
366 |
|
|
|
367 |
<p>This event can only be subscribed with |
|
|
368 |
<code>Y.on("windowresize", callback)</code>;</p> |
|
|
369 |
</td> |
|
|
370 |
</tr> |
|
|
371 |
<tr> |
|
|
372 |
<td><a href="http://yuilibrary.com/yui/docs/api/module_event-touch.html"><code>event-touch</code></a></td> |
|
|
373 |
<td> |
|
|
374 |
Adds support for <a href="touch.html">subscribing to native touch |
|
|
375 |
and gesture events</a>. |
|
|
376 |
</td> |
|
|
377 |
</tr> |
|
|
378 |
<tr> |
|
|
379 |
<td><a href="http://yuilibrary.com/yui/docs/api/module_event-valuechange.html"><code>event-valuechange</code></a></td> |
|
|
380 |
<td> |
|
|
381 |
Adds a <a href="valuechange.html">"valuechange" event</a> that fires when input element text |
|
|
382 |
changes (this is harder than you think). |
|
|
383 |
</td> |
|
|
384 |
</tr> |
|
|
385 |
<tr> |
|
|
386 |
<td><a href="http://yuilibrary.com/yui/docs/api/module_event-contextmenu.html"><code>event-contextmenu</code></a></td> |
|
|
387 |
<td> |
|
|
388 |
<a href="contextmenu.html">Fixes bugs and inconstancies</a> that can occur when the "contextmenu" event is fired via the keyboard. <a href="contextmenu.html#the-value-of-the-contextmenu-synthetic-event">Adds sugar for working with the "contextmenu" event</a>. |
|
|
389 |
</td> |
|
|
390 |
</tr> |
|
|
391 |
<tr> |
|
|
392 |
<td><a href="http://yuilibrary.com/yui/docs/api/module_event-tap.html"><code>event-tap</code></a></td> |
|
|
393 |
<td> |
|
|
394 |
Adds a synthetic <a href="tap.html">"tap" event</a> that allows for fast-click on touch devices, while supporting mouse events as well. |
|
|
395 |
</td> |
|
|
396 |
</tr> |
|
|
397 |
</tbody> |
|
|
398 |
</table> |
|
|
399 |
|
|
|
400 |
<h2 id="delegation">Event Delegation</h2> |
|
|
401 |
|
|
|
402 |
<p>If you don't already know what event delegation is, you should <a |
|
|
403 |
href="delegation.html">read this quick overview</a>. Short form: <em>you need |
|
|
404 |
to be using this</em>.</p> |
|
|
405 |
|
|
|
406 |
<pre class="code prettyprint">// single element subscription |
|
|
407 |
node.on("click", handleClick); |
|
|
408 |
|
|
|
409 |
// delegated subscription for all button clicks from inside the node |
|
|
410 |
node.delegate("click", handleClick, "button, input[type=button]");</pre> |
|
|
411 |
|
|
|
412 |
|
|
|
413 |
<p>Creating a delegated subscription looks very much like creating any other |
|
|
414 |
event subscription with two differences. First, it's a different method name, |
|
|
415 |
<code>delegate</code>. Second, there is another argument: a CSS selector that is used to |
|
|
416 |
test the event's originating element to decide if the callback should be |
|
|
417 |
executed. If the event started at or inside an element matching the selector, |
|
|
418 |
the callback will execute.</p> |
|
|
419 |
|
|
|
420 |
<p>Unlike <code>node.on()</code> subscriptions, the <code>this</code> object in <code>node.delegate()</code> |
|
|
421 |
callbacks will refer to the element that matched the css filter, not to <code>node</code>. |
|
|
422 |
We did this because likely your logic revolves around the nodes described by |
|
|
423 |
the filter, not around the element that contains them.</p> |
|
|
424 |
|
|
|
425 |
<pre class="code prettyprint">function handleClick (e) { |
|
|
426 |
// `this` is the button with class .remove, not the #items element |
|
|
427 |
// remove the containing LI |
|
|
428 |
this.ancestor('li').remove(); |
|
|
429 |
|
|
|
430 |
// e.currentTarget is also the button.remove |
|
|
431 |
// e.container === Y.one('#items') |
|
|
432 |
} |
|
|
433 |
|
|
|
434 |
Y.one('#items').delegate('click', handleClick, 'button.remove');</pre> |
|
|
435 |
|
|
|
436 |
|
|
|
437 |
<p>For more complex target filtering, a function can be passed instead of a css |
|
|
438 |
selector. See the |
|
|
439 |
<a href="http://yuilibrary.com/yui/docs/api/module_event-delegate.html#method_delegate">API docs</a> |
|
|
440 |
for more details.</p> |
|
|
441 |
|
|
|
442 |
<p>As noted <a href="#modules">above</a>, the <code>event-delegate</code> module is |
|
|
443 |
included in the <code>event</code> rollup, but <code>node-event-delegate</code> isn't. We recommend |
|
|
444 |
using delegation from the Node API, so you should <code>use()</code> either |
|
|
445 |
<code>node-event-delegate</code> or the <code>node</code> rollup.</p> |
|
|
446 |
|
|
|
447 |
|
|
|
448 |
<h2 id="more">More Event API Goodness</h2> |
|
|
449 |
|
|
|
450 |
<p> |
|
|
451 |
Here is a sampling of some of the other ways to manage event subscriptions |
|
|
452 |
in YUI. |
|
|
453 |
</p> |
|
|
454 |
|
|
|
455 |
<h4 id="y-on">Subscribe from <code>Y</code></h4> |
|
|
456 |
|
|
|
457 |
<pre class="code prettyprint">// Y.on() takes a third argument which is the Node, DOM element, |
|
|
458 |
// or CSS selector of the element(s) to bind |
|
|
459 |
Y.on("click", handleClick, "#readygo"); |
|
|
460 |
|
|
|
461 |
// Y.delegate() similarly takes the containing element or selector |
|
|
462 |
// as the third argument |
|
|
463 |
Y.delegate("click", handleClick, "#container", "button, input[type=button]");</pre> |
|
|
464 |
|
|
|
465 |
|
|
|
466 |
<p> |
|
|
467 |
An alternate syntax for DOM subscriptions is using <code>Y.on()</code> or |
|
|
468 |
<code>Y.delegate()</code>. When identifying the target by a CSS selector, these |
|
|
469 |
methods can be used regardless if the element is currently available for |
|
|
470 |
scripting. If it's not yet on the page, a poll will regularly look for it |
|
|
471 |
(for a few seconds) and the subscription will be automatically attached |
|
|
472 |
when the element is found. Relying on this behavior can introduce race |
|
|
473 |
conditions, though, so use it wisely. |
|
|
474 |
</p> |
|
|
475 |
<p> |
|
|
476 |
Use of <code>Y.on()</code> instead of <code>node.on()</code> is largely a stylistic preference, |
|
|
477 |
though <a href="#y-on-vs-node-on">there are some technical differences</a>. |
|
|
478 |
</p> |
|
|
479 |
|
|
|
480 |
|
|
|
481 |
<h4 id="once">One time subscriptions</h4> |
|
|
482 |
|
|
|
483 |
<pre class="code prettyprint">tabLabel.once('mouseover', loadTabContent);</pre> |
|
|
484 |
|
|
|
485 |
|
|
|
486 |
<p>If you only want to execute a callback on the first occurrence of an event, use <code>node.once()</code> or <code>Y.once()</code>. The subscription will automatically be detached after the event fires.</p> |
|
|
487 |
|
|
|
488 |
<p>The signature for <code>once()</code> is the same as <code>on()</code>.</p> |
|
|
489 |
|
|
|
490 |
<h4 id="grouping-subscriptions">Grouping subscriptions</h4> |
|
|
491 |
|
|
|
492 |
<p>Pass an object to subscribe to multiple events, each with their own |
|
|
493 |
callback</p> |
|
|
494 |
|
|
|
495 |
<pre class="code prettyprint">function validate(e) { ... } |
|
|
496 |
function clearPlaceholder(e) { ... } |
|
|
497 |
|
|
|
498 |
var groupSub = inputNode.on({ |
|
|
499 |
blur : validate, |
|
|
500 |
keypress: validate, |
|
|
501 |
focus : clearPlaceholder |
|
|
502 |
}); |
|
|
503 |
|
|
|
504 |
// Detach the blur, keypress, and focus subscriptions in one call |
|
|
505 |
groupSub.detach();</pre> |
|
|
506 |
|
|
|
507 |
|
|
|
508 |
<p>Pass an array to subscribe to multiple events with the same callback</p> |
|
|
509 |
<pre class="code prettyprint">function activate(e) { ... } |
|
|
510 |
|
|
|
511 |
groupSub = inputNode.on(['focus', 'mouseover'], activate); |
|
|
512 |
|
|
|
513 |
// Detach the focus and mouseover subscriptions |
|
|
514 |
groupSub.detach();</pre> |
|
|
515 |
|
|
|
516 |
|
|
|
517 |
<p>Prefix the event name with a category to allow detaching multiple |
|
|
518 |
subscriptions by that category.</p> |
|
|
519 |
|
|
|
520 |
<pre class="code prettyprint">inputNode.on('my-category|focus', activate); |
|
|
521 |
inputNode.on('my-category|mouseover', activate); |
|
|
522 |
|
|
|
523 |
// You can detach specific subscriptions by 'my-category|focus' or all with |* |
|
|
524 |
inputNode.detach('my-category|*');</pre> |
|
|
525 |
|
|
|
526 |
|
|
|
527 |
<p>The <code>once()</code> and <code>delegate()</code> methods also support these alternate |
|
|
528 |
signatures.</p> |
|
|
529 |
|
|
|
530 |
<h4 id="extended-signature">Binding <code>this</code> and additional callback arguments</h4> |
|
|
531 |
|
|
|
532 |
<p> |
|
|
533 |
By default, the "<code>this</code>" object in subscription callbacks will be the Node |
|
|
534 |
or NodeList that subscribed to them. Override this default by passing your |
|
|
535 |
own <code>this</code> object as the third argument to <code>on()</code> or the fourth to |
|
|
536 |
<code>delegate()</code>. Note that the argument index is shifted when using <code>Y.on()</code> |
|
|
537 |
and <code>Y.delegate()</code> or <a href="synths.html">synthetic events with custom |
|
|
538 |
signatures</a>. |
|
|
539 |
</p> |
|
|
540 |
|
|
|
541 |
<pre class="code prettyprint">// equivalent to node.on('click', function (e) { overlay.hide(e); }); |
|
|
542 |
node.on('click', overlay.show, overlay); |
|
|
543 |
|
|
|
544 |
node.once('mouseover', door.unlock, door); |
|
|
545 |
|
|
|
546 |
// `this` override comes after the filter; also shifted for the 'key' event's |
|
|
547 |
// custom signature. |
|
|
548 |
container.delegate('key', validator.isValid, 'enter,tab', 'input', validator); |
|
|
549 |
|
|
|
550 |
// Corresponding alternatives from Y |
|
|
551 |
Y.on('click', overlay.show, '#show', overlay); |
|
|
552 |
|
|
|
553 |
Y.once('mouseover', door.unlock, '#gate13', door); |
|
|
554 |
|
|
|
555 |
Y.delegate('key', validator.isValid, '#myForm', 'enter,tab', 'input', validator);</pre> |
|
|
556 |
|
|
|
557 |
|
|
|
558 |
<p>Additional arguments passed to the subscription methods will be sent along |
|
|
559 |
to the callback after the event facade. If you want to bind extra arguments, |
|
|
560 |
but don't want to override the "<code>this</code>" object, pass <code>null</code> for the <code>this</code> |
|
|
561 |
argument.</p> |
|
|
562 |
|
|
|
563 |
<pre class="code prettyprint">MyClass.prototype = { |
|
|
564 |
someMethod: function (param) { |
|
|
565 |
Y.log(param); // => "I'm Extra!" |
|
|
566 |
}, |
|
|
567 |
|
|
|
568 |
handleClick: function (e, extraParam) { |
|
|
569 |
this.someMethod(extraParam); |
|
|
570 |
... |
|
|
571 |
}, |
|
|
572 |
... |
|
|
573 |
}; |
|
|
574 |
|
|
|
575 |
var instance = new Y.MyClass(); |
|
|
576 |
|
|
|
577 |
// The extra arg is passed as the second param to the callback after `e` |
|
|
578 |
Y.one('#readygo').on('click', instance.handleClick, instance, "I'm Extra!");</pre> |
|
|
579 |
|
|
|
580 |
|
|
|
581 |
<h4 id="detach-methods">More ways to clean up subscriptions</h4> |
|
|
582 |
|
|
|
583 |
<p>There are a lot of options for detaching events in YUI. See the table below for details.</p> |
|
|
584 |
|
|
|
585 |
<table> |
|
|
586 |
<thead> |
|
|
587 |
<tr> |
|
|
588 |
<th>Method</th> |
|
|
589 |
<th>What it does</th> |
|
|
590 |
</tr> |
|
|
591 |
</thead> |
|
|
592 |
<tbody> |
|
|
593 |
<tr> |
|
|
594 |
<td> |
|
|
595 |
<pre class="code prettyprint">var subscription = node.on('click', callback); |
|
|
596 |
|
|
|
597 |
subscription.detach();</pre> |
|
|
598 |
|
|
|
599 |
</td> |
|
|
600 |
<td> |
|
|
601 |
<p> |
|
|
602 |
Removes a specific subscription or, if created with one of the |
|
|
603 |
group subscription methods, a group of subscriptions. |
|
|
604 |
</p> |
|
|
605 |
<p> |
|
|
606 |
Generally, this is the best method to use. |
|
|
607 |
</p> |
|
|
608 |
</td> |
|
|
609 |
</tr> |
|
|
610 |
<tr id="remove-by-category"> |
|
|
611 |
<td> |
|
|
612 |
<pre class="code prettyprint">node.on('foo-category|click', callback); |
|
|
613 |
|
|
|
614 |
node.detach('foo-category|click'); |
|
|
615 |
// OR |
|
|
616 |
node.detach('foo-category|*');</pre> |
|
|
617 |
|
|
|
618 |
</td> |
|
|
619 |
<td> |
|
|
620 |
<p> |
|
|
621 |
Removes a subscription or group of subscriptions that included |
|
|
622 |
the specified category in the subscription event type. |
|
|
623 |
</p> |
|
|
624 |
<p> |
|
|
625 |
This is typically only safe in implementation code, not |
|
|
626 |
module code, because multiple subscriptions using the same type |
|
|
627 |
and category will be detached by the call to <code>detach</code>. |
|
|
628 |
</p> |
|
|
629 |
</td> |
|
|
630 |
</tr> |
|
|
631 |
<tr> |
|
|
632 |
<td> |
|
|
633 |
<pre class="code prettyprint">node.detach('click', callback); |
|
|
634 |
// OR |
|
|
635 |
node.detach('click'); |
|
|
636 |
// OR |
|
|
637 |
node.detach():</pre> |
|
|
638 |
|
|
|
639 |
</td> |
|
|
640 |
<td> |
|
|
641 |
<p> |
|
|
642 |
If you have a reference to the subscribed callback function, |
|
|
643 |
(but not a subscription handle) use the two argument signature. |
|
|
644 |
</p> |
|
|
645 |
<p> |
|
|
646 |
With one argument, <code>detach</code> will remove all subscriptions for |
|
|
647 |
the specified event. With no arguments, it removes all |
|
|
648 |
subscriptions for all events. |
|
|
649 |
</p> |
|
|
650 |
<p> |
|
|
651 |
<code>detach</code> does not remove subscriptions from descendant nodes. |
|
|
652 |
</p> |
|
|
653 |
</td> |
|
|
654 |
</tr> |
|
|
655 |
<tr> |
|
|
656 |
<td> |
|
|
657 |
<pre class="code prettyprint">node.detachAll();</pre> |
|
|
658 |
|
|
|
659 |
</td> |
|
|
660 |
<td> |
|
|
661 |
<p> |
|
|
662 |
Works the same as <code>node.detach()</code>. |
|
|
663 |
</p> |
|
|
664 |
</td> |
|
|
665 |
</tr> |
|
|
666 |
<tr> |
|
|
667 |
<td> |
|
|
668 |
<pre class="code prettyprint">node.purge(); |
|
|
669 |
// OR |
|
|
670 |
node.purge(true); |
|
|
671 |
// OR |
|
|
672 |
node.purge(true, 'click');</pre> |
|
|
673 |
|
|
|
674 |
</td> |
|
|
675 |
<td> |
|
|
676 |
<p> |
|
|
677 |
With no arguments, <code>purge</code> works the same as <code>node.detach()</code>. |
|
|
678 |
</p> |
|
|
679 |
<p> |
|
|
680 |
Passing <code>true</code> as a first argument will remove all |
|
|
681 |
subscriptions for all events from the node <em>and its |
|
|
682 |
descendant subtree</em>. Passing an event type as a second |
|
|
683 |
argument will only deep purge subscriptions to that event. |
|
|
684 |
</p> |
|
|
685 |
</td> |
|
|
686 |
</tr> |
|
|
687 |
<tr> |
|
|
688 |
<td> |
|
|
689 |
<pre class="code prettyprint">node.empty();</pre> |
|
|
690 |
|
|
|
691 |
</td> |
|
|
692 |
<td> |
|
|
693 |
<p> |
|
|
694 |
Removes subscriptions for all events <em>only from the |
|
|
695 |
descendants of a node</em> after removing them from the DOM. |
|
|
696 |
</p> |
|
|
697 |
</td> |
|
|
698 |
</tr> |
|
|
699 |
<tr> |
|
|
700 |
<td> |
|
|
701 |
<pre class="code prettyprint">node.destroy(); |
|
|
702 |
// OR |
|
|
703 |
node.destroy(true);</pre> |
|
|
704 |
|
|
|
705 |
</td> |
|
|
706 |
<td> |
|
|
707 |
<p> |
|
|
708 |
With no arguments, works like <code>node.detach()</code>. |
|
|
709 |
</p> |
|
|
710 |
<p> |
|
|
711 |
With <code>true</code> as a first argument, it works like |
|
|
712 |
<code>node.purge(true)</code>. |
|
|
713 |
</p> |
|
|
714 |
<p> |
|
|
715 |
The <code>destroy</code> method does more than detaching event |
|
|
716 |
subscribers. Read the |
|
|
717 |
<a href="http://yuilibrary.com/yui/docs/api/classes/Node.html#method_destroy">API |
|
|
718 |
docs</a> for details. |
|
|
719 |
</p> |
|
|
720 |
</td> |
|
|
721 |
</tr> |
|
|
722 |
<tr> |
|
|
723 |
<td> |
|
|
724 |
<pre class="code prettyprint">Y.Event.detach('click', callback, '#foo');</pre> |
|
|
725 |
|
|
|
726 |
</td> |
|
|
727 |
<td> |
|
|
728 |
<p> |
|
|
729 |
Same as <code>Y.one('#foo').detach( [other args] )</code>. |
|
|
730 |
</p> |
|
|
731 |
</td> |
|
|
732 |
</tr> |
|
|
733 |
<tr> |
|
|
734 |
<td> |
|
|
735 |
<pre class="code prettyprint">Y.Event.purgeElement('#foo', true, 'click');</pre> |
|
|
736 |
|
|
|
737 |
</td> |
|
|
738 |
<td> |
|
|
739 |
<p> |
|
|
740 |
Same as <code>Y.one('#foo').purge( [other args] )</code>. |
|
|
741 |
</p> |
|
|
742 |
</td> |
|
|
743 |
</tr> |
|
|
744 |
</tbody> |
|
|
745 |
</table> |
|
|
746 |
|
|
|
747 |
<h2 id="simulate">Simulate browser events</h2> |
|
|
748 |
|
|
|
749 |
<p> |
|
|
750 |
For creating automated functional tests, being able to simulate user |
|
|
751 |
interaction can be crucial. That's where the <code>node-event-simulate</code> module |
|
|
752 |
comes in. |
|
|
753 |
</p> |
|
|
754 |
|
|
|
755 |
<pre class="code prettyprint">YUI().use('test', 'node-event-simulate', 'fancy', function (Y) { |
|
|
756 |
|
|
|
757 |
var test = new Y.Test.Case({ |
|
|
758 |
... |
|
|
759 |
|
|
|
760 |
"clicking close button should dismiss UI": function () { |
|
|
761 |
|
|
|
762 |
var widget = new Y.MyFancyWidget().render('#here'), |
|
|
763 |
uiBox = widget.get('boundingBox'), |
|
|
764 |
closeButton = uiBox.one('.close-button'); |
|
|
765 |
|
|
|
766 |
closeButton.simulate('click'); |
|
|
767 |
|
|
|
768 |
Y.Assert.isFalse( uiBox.inDoc() ); |
|
|
769 |
}, |
|
|
770 |
...</pre> |
|
|
771 |
|
|
|
772 |
|
|
|
773 |
<p> |
|
|
774 |
<code>node.simulate( type, eventProperties )</code> creates a native DOM event that |
|
|
775 |
will bubble (if appropriate), but will not trigger native default behavior. |
|
|
776 |
For example, <code>node.simulate('submit')</code> will not send data to the server for |
|
|
777 |
a page reload. |
|
|
778 |
</p> |
|
|
779 |
|
|
|
780 |
<p>Read <a href="simulate.html">more about event simulation here</a>.</p> |
|
|
781 |
|
|
|
782 |
<h2 id="synthetic-events">Synthetic Events</h2> |
|
|
783 |
|
|
|
784 |
<p>The event system supports adding new abstractions over the native DOM |
|
|
785 |
environment that behave like DOM events. These abstractions are called |
|
|
786 |
synthetic events, and you can subscribe to them like any other DOM event with |
|
|
787 |
<code>node.on()</code> or <code>node.delegate()</code>.</p> |
|
|
788 |
|
|
|
789 |
<pre class="code prettyprint">Y.one('#dialog').on('clickoutside', function (e) { |
|
|
790 |
this.transition('fadeOut'); |
|
|
791 |
}); |
|
|
792 |
|
|
|
793 |
Y.one('#editable-table').delegate('key', saveAndAdvance, 'tab', 'input');</pre> |
|
|
794 |
|
|
|
795 |
|
|
|
796 |
<p> |
|
|
797 |
The synthetic events that are available as core YUI modules are listed in |
|
|
798 |
<a href="#modules">the table of modules above</a>, though there are others |
|
|
799 |
<a href="http://yuilibrary.com/gallery/">in the Gallery</a>. Most events |
|
|
800 |
listed in the table are linked to pages that describe the specific event in |
|
|
801 |
more detail. |
|
|
802 |
</p> |
|
|
803 |
|
|
|
804 |
<h4 id="creating-dom-events">Creating DOM events</h4> |
|
|
805 |
|
|
|
806 |
<p>Create your own synthetic events with <code>Y.Event.define(type, config)</code>.</p> |
|
|
807 |
|
|
|
808 |
<pre class="code prettyprint">Y.Event.define("tripleclick", { |
|
|
809 |
|
|
|
810 |
// The setup logic executed when node.on('tripleclick', callback) is called |
|
|
811 |
on: function (node, subscription, notifier) { |
|
|
812 |
// supporting methods can be referenced from `this` |
|
|
813 |
this._clear(subscription); |
|
|
814 |
|
|
|
815 |
// To make detaching easy, a common pattern is to add the subscription |
|
|
816 |
// for the supporting DOM event to the subscription object passed in. |
|
|
817 |
// This is then referenced in the detach() method below. |
|
|
818 |
subscription._handle = node.on('click', function (e) { |
|
|
819 |
if (subscription._timer) { |
|
|
820 |
subscription._timer.cancel(); |
|
|
821 |
} |
|
|
822 |
|
|
|
823 |
if (++subscription._counter === 3) { |
|
|
824 |
this._clear(subscription); |
|
|
825 |
|
|
|
826 |
// The notifier triggers the subscriptions to be executed. |
|
|
827 |
// Pass its fire() method the triggering DOM event facade |
|
|
828 |
notifier.fire(e); |
|
|
829 |
} else { |
|
|
830 |
subscription._timer = |
|
|
831 |
Y.later(300, this, this._clear, [subscription]); |
|
|
832 |
} |
|
|
833 |
}); |
|
|
834 |
}, |
|
|
835 |
|
|
|
836 |
// The logic executed when the 'tripleclick' subscription is `detach()`ed |
|
|
837 |
detach: function (node, subscription, notifier) { |
|
|
838 |
// Clean up supporting DOM subscriptions and other external hooks |
|
|
839 |
// when the synthetic event subscription is detached. |
|
|
840 |
subscription._handle.detach(); |
|
|
841 |
|
|
|
842 |
if (subscription._timer) { |
|
|
843 |
subscription._timer.cancel(); |
|
|
844 |
} |
|
|
845 |
}, |
|
|
846 |
|
|
|
847 |
// Additional methods can be added to support the lifecycle methods |
|
|
848 |
_clear: function (subscription) { |
|
|
849 |
subscription._counter = 0; |
|
|
850 |
subscription._timer = null; |
|
|
851 |
}, |
|
|
852 |
|
|
|
853 |
... |
|
|
854 |
});</pre> |
|
|
855 |
|
|
|
856 |
|
|
|
857 |
<p>After the synthetic event is defined, it is available for every Node and |
|
|
858 |
NodeList to subscribe to.</p> |
|
|
859 |
|
|
|
860 |
<pre class="code prettyprint">Y.one('#hellokitty').on('tripleclick', omgYayCantClickEnough);</pre> |
|
|
861 |
|
|
|
862 |
|
|
|
863 |
<p>There is additional configuration to <a href="synths.html">add support for |
|
|
864 |
<code>delegate()</code> or extra subscription arguments</a>, but often very little extra |
|
|
865 |
code is needed.</p> |
|
|
866 |
|
|
|
867 |
<h2 id="troubleshootingfaq">Troubleshooting/FAQ</h2> |
|
|
868 |
|
|
|
869 |
<ul> |
|
|
870 |
<li><a href="#function-reference">My callback is executing at the wrong time. What's going on?</a></li> |
|
|
871 |
<li><a href="#wrong-this">I'm getting an error in my callback that "(some object) has no method (someMethodOnMyObject)". What am I missing?</a></li> |
|
|
872 |
<li><a href="#which-events">What events can I subscribe to?</a></li> |
|
|
873 |
<li><a href="#why-on-no-chain">Why isn't on() chainable?</a></li> |
|
|
874 |
<li><a href="#y-on-vs-node-on">Why would I use <code>Y.on()</code> or <code>Y.delegate()</code> instead of <code>node.on()</code> and <code>node.delegate()</code>?</a></li> |
|
|
875 |
<li><a href="#after">EventTarget also provides an <code>after()</code> method. How does that work for DOM events?</a></li> |
|
|
876 |
<li><a href="#nodelist-this">When I subscribe to an event from a NodeList, <code>this</code> is the NodeList, not the individual Node. What's up with that?</a></li> |
|
|
877 |
<li><a href="#nodelist-delegate">Where is <code>nodelist.delegate()</code>?</a></li> |
|
|
878 |
<!--li><a href="#">What works and what doesn't on mobile browsers?</a></li--> |
|
|
879 |
</ul> |
|
|
880 |
|
|
|
881 |
<h4 id="function-reference">My callback is executing at the wrong time. What's going on?</h4> |
|
|
882 |
|
|
|
883 |
<p>It's likely that you've included parenthesis in the subscription.</p> |
|
|
884 |
<pre class="code prettyprint">// WRONG |
|
|
885 |
node.on('click', someFunction()); |
|
|
886 |
node.on('click', myObject.someFunction()); |
|
|
887 |
|
|
|
888 |
// RIGHT |
|
|
889 |
node.on('click', someFunction); |
|
|
890 |
node.on('click', myObject.someFunction, myObject);</pre> |
|
|
891 |
|
|
|
892 |
|
|
|
893 |
<p> |
|
|
894 |
Including the parens makes the function execute immediately, and pass the |
|
|
895 |
return value from the function to <code>node.on('click', [RETURN VALUE])</code>. To |
|
|
896 |
pass a function around, just omit the parens. |
|
|
897 |
</p> |
|
|
898 |
|
|
|
899 |
<h4 id="wrong-this">I'm getting an error in my callback that "<code>(some object) has no method (someMethodOnMyObject)</code>". What am I missing?</h4> |
|
|
900 |
|
|
|
901 |
<p> |
|
|
902 |
You may be passing an object method to <code>on()</code>, but forgot to include |
|
|
903 |
<a href="#extended-signature">the <code>this</code> object override parameter</a> in |
|
|
904 |
the subscription. |
|
|
905 |
</p> |
|
|
906 |
|
|
|
907 |
<p> |
|
|
908 |
Another option to make sure object methods are called with the correct |
|
|
909 |
<code>this</code> object is to use |
|
|
910 |
<a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_bind">`Y.bind(obj.method, |
|
|
911 |
obj)`</a> or |
|
|
912 |
<a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_rbind">`Y.rbind(obj.method, |
|
|
913 |
obj)`</a>. |
|
|
914 |
</p> |
|
|
915 |
|
|
|
916 |
<pre class="code prettyprint">// WRONG |
|
|
917 |
node.on('click', myObj.method); |
|
|
918 |
|
|
|
919 |
// RIGHT |
|
|
920 |
node.on('click', myObj.method, myObj); |
|
|
921 |
|
|
|
922 |
// RIGHT (alternate) |
|
|
923 |
node.on('click', Y.rbind(obj.method, obj));</pre> |
|
|
924 |
|
|
|
925 |
|
|
|
926 |
<h4 id="which-events">What events can I subscribe to?</h4> |
|
|
927 |
|
|
|
928 |
<p> |
|
|
929 |
It depends what modules you've included. Check out the |
|
|
930 |
<a href="#event-whitelist">whitelisted events table</a>. |
|
|
931 |
</p> |
|
|
932 |
|
|
|
933 |
<h4 id="why-on-no-chain">Why isn't on() chainable?</h4> |
|
|
934 |
|
|
|
935 |
<p> |
|
|
936 |
After much deliberation, the YUI team decided that returning a subscription |
|
|
937 |
handle was preferable to chaining in order to better support clean event |
|
|
938 |
detaching across the various scenarios that DOM and custom events are used. |
|
|
939 |
</p> |
|
|
940 |
<p> |
|
|
941 |
In any sizable application, managing event subscriptions becomes |
|
|
942 |
increasingly important, and detaching events must be done with precision. |
|
|
943 |
Because YUI allows duplicate subscriptions, any host-based detach method |
|
|
944 |
will necessarily be less than 100% reliable with respect to avoiding |
|
|
945 |
removal of subscriptions made by other parts of the system. |
|
|
946 |
</p> |
|
|
947 |
<p> |
|
|
948 |
Otherwise, it's common to subscribe to events with anonymous functions, |
|
|
949 |
which makes it impossible to detach the specific subscription by signature |
|
|
950 |
because you don't have a function reference to use to identify the specific |
|
|
951 |
subscription to remove. Subscription categories can be used, but |
|
|
952 |
<a href="#remove-by-category">are also less precise</a> than |
|
|
953 |
dealing with a specific subscription object. |
|
|
954 |
</p> |
|
|
955 |
|
|
|
956 |
<h4 id="y-on-vs-node-on">Why would I use <code>Y.on()</code> or <code>Y.delegate()</code> instead of <code>node.on()</code> and <code>node.delegate()</code>?</h4> |
|
|
957 |
|
|
|
958 |
<p> |
|
|
959 |
It's <a href="#y-on">largely a stylistic preference</a>, but there are some |
|
|
960 |
technical differences when passing a selector string as a the third |
|
|
961 |
argument to <code>Y.on()</code> or <code>Y.delegate()</code> (ala |
|
|
962 |
<code>Y.on('click', callback, '#some select.or-string')</code>. |
|
|
963 |
</p> |
|
|
964 |
|
|
|
965 |
<ol> |
|
|
966 |
<li> |
|
|
967 |
<p> |
|
|
968 |
<code>Y.on()</code> uses the |
|
|
969 |
<a href="http://yuilibrary.com/yui/docs/api/classes/Selector.html">Selector engine</a> |
|
|
970 |
directly rather than calling through <code>Y.all(...)</code>. |
|
|
971 |
</p> |
|
|
972 |
<p> |
|
|
973 |
The benefit here is that the Node and NodeList constructors add the |
|
|
974 |
slightest bit of overhead to the subscription process. |
|
|
975 |
</p> |
|
|
976 |
</li> |
|
|
977 |
<li> |
|
|
978 |
When passing a selector that matches multiple elements, the <code>this</code> in |
|
|
979 |
the callback will be the individual Node, not a |
|
|
980 |
<a href="#nodelist-this">NodeList wrapping all matched elements</a>. |
|
|
981 |
</li> |
|
|
982 |
<li> |
|
|
983 |
<p> |
|
|
984 |
If called before the elements matching the selector are attached to |
|
|
985 |
the DOM, it will poll for a few seconds and automatically attach |
|
|
986 |
the subscription when the first matching element is found. |
|
|
987 |
</p> |
|
|
988 |
<p> |
|
|
989 |
Note, if using a selector that matches multiple elements, the poll |
|
|
990 |
will attach the subscription the first time Selector finds a match. |
|
|
991 |
This <em>may not include all the elements</em> because either the |
|
|
992 |
DOM is not fully updated yet, or the code that adds the matching |
|
|
993 |
elements may happen in batches. |
|
|
994 |
</p> |
|
|
995 |
<p>In practice, it is best to avoid reliance on this behavior.</p> |
|
|
996 |
</li> |
|
|
997 |
</ol> |
|
|
998 |
|
|
|
999 |
<h4 id="after"><code>EventTarget</code> also provides an <code>after()</code> method. How does that work for DOM events?</h4> |
|
|
1000 |
|
|
|
1001 |
<p> |
|
|
1002 |
<code>node.after(...)</code> is equivalent to <code>node.on(...)</code>. The DOM doesn't expose |
|
|
1003 |
an "after" moment to hook into. |
|
|
1004 |
</p> |
|
|
1005 |
|
|
|
1006 |
<h4 id="nodelist-this">When I subscribe to an event from a NodeList, <code>this</code> is the NodeList, not the individual Node. What's up with that?</h4> |
|
|
1007 |
|
|
|
1008 |
<p> |
|
|
1009 |
In the callback, <code>e.currentTarget</code> will always refer to the individual Node. |
|
|
1010 |
However, if you call |
|
|
1011 |
</p> |
|
|
1012 |
|
|
|
1013 |
<pre class="code prettyprint">Y.all('#some select.or-string').on('click', function (e) { |
|
|
1014 |
// how do I reference the NodeList? |
|
|
1015 |
});</pre> |
|
|
1016 |
|
|
|
1017 |
|
|
|
1018 |
<p> |
|
|
1019 |
you can't reference the NodeList captured by <code>Y.all()</code> without calling |
|
|
1020 |
<code>Y.all()</code> again, but that results in unnecessary overhead, and may match |
|
|
1021 |
different elements in the subsequent call. |
|
|
1022 |
</p> |
|
|
1023 |
|
|
|
1024 |
<p> |
|
|
1025 |
In general, you should avoid <code>nodelist.on()</code> anyway, |
|
|
1026 |
<a href="#delegation">in favor of event delegation</a>. |
|
|
1027 |
</p> |
|
|
1028 |
|
|
|
1029 |
<h4 id="nodelist-delegate">Where is <code>nodelist.delegate()</code>?</h4> |
|
|
1030 |
|
|
|
1031 |
<p> |
|
|
1032 |
The point of delegation is to reduce the number of subscriptions being made. |
|
|
1033 |
<code>nodelist.delegate()</code> would be philosophically at odds with that. Either |
|
|
1034 |
call <code>node.delegate()</code> from an element higher up the DOM tree, or <em>if |
|
|
1035 |
you must</em> delegate the same event and callback from multiple |
|
|
1036 |
containers, use |
|
|
1037 |
</p> |
|
|
1038 |
|
|
|
1039 |
<pre class="code prettyprint">nodelist.each(function (node) { |
|
|
1040 |
node.delegate('click', callback, '.not-recommended'); |
|
|
1041 |
});</pre> |
|
|
1042 |
|
|
|
1043 |
|
|
|
1044 |
<h2 id="more-reading">More Reading</h2> |
|
|
1045 |
|
|
|
1046 |
<h3 id="page-lifecycle-events"><a href="domready.html">Page Lifecycle events</a></h3> |
|
|
1047 |
|
|
|
1048 |
<p> |
|
|
1049 |
Details about <code>domready</code>, <code>available</code>, and <code>contentready</code> events provided in |
|
|
1050 |
the event core. <a href="domready.html">Read more...</a> |
|
|
1051 |
</p> |
|
|
1052 |
|
|
|
1053 |
<h3 id="event-delegation"><a href="delegation.html">Event Delegation</a></h3> |
|
|
1054 |
|
|
|
1055 |
<p> |
|
|
1056 |
What is event delegation and why you should be using it. A lot. |
|
|
1057 |
<a href="delegation.html">Read more...</a> |
|
|
1058 |
</p> |
|
|
1059 |
|
|
|
1060 |
<h3 id="event-simulation"><a href="simulate.html">Event Simulation</a></h3> |
|
|
1061 |
|
|
|
1062 |
<p> |
|
|
1063 |
How to simulate user events like "click" or "keypress", what events can be |
|
|
1064 |
simulated, and some important caveats. |
|
|
1065 |
<a href="simulate.html">Read more...</a> |
|
|
1066 |
</p> |
|
|
1067 |
|
|
|
1068 |
<h3 id="create-new-dom-events"><a href="synths.html">Create New DOM Events</a></h3> |
|
|
1069 |
|
|
|
1070 |
<p> |
|
|
1071 |
How to create a tailor made DOM event for subscription or delegation from |
|
|
1072 |
any Node. This is a great way to encapsulate and label more comples user |
|
|
1073 |
behaviors. |
|
|
1074 |
<a href="synths.html">Read more...</a> |
|
|
1075 |
</p> |
|
|
1076 |
|
|
|
1077 |
<h3 id="working-with-touch-events"><a href="touch.html">Working With Touch Events</a></h3> |
|
|
1078 |
|
|
|
1079 |
<p> |
|
|
1080 |
Details on the supported touch events, the touch/mouse abstraction layer |
|
|
1081 |
events, and gesture based events like "flick". |
|
|
1082 |
<a href="touch.html">Read more...</a> |
|
|
1083 |
</p> |
|
|
1084 |
|
|
|
1085 |
<h3 id="delegating-the-focus-and-blur-events"><a href="focus.html">Delegating the <code>focus</code> and <code>blur</code> Events</a></h3> |
|
|
1086 |
|
|
|
1087 |
<p> |
|
|
1088 |
Using the <code>event-focus</code> module to simulate support for bubbling <code>focus</code> and |
|
|
1089 |
<code>blur</code> events. |
|
|
1090 |
<a href="focus.html">Read more...</a> |
|
|
1091 |
</p> |
|
|
1092 |
|
|
|
1093 |
<h3 id="the-hover-mouseenter-and-mouseleave-events"><a href="mouseenter.html">The <code>hover</code>, <code>mouseenter</code>, and <code>mouseleave</code> Events</a></h3> |
|
|
1094 |
|
|
|
1095 |
<p> |
|
|
1096 |
Describes why <code>mouseenter</code> and <code>mouseleave</code> events are usually what you |
|
|
1097 |
want when you subscribe to <code>mouseover</code> and <code>mouseout</code>, and goes over using |
|
|
1098 |
the <code>hover</code> event (which uses the other two under the hood). |
|
|
1099 |
<a href="mouseenter.html">Read more...</a> |
|
|
1100 |
</p> |
|
|
1101 |
|
|
|
1102 |
<h3 id="complex-keyboard-input-filtering"><a href="key.html">Complex Keyboard Input Filtering</a></h3> |
|
|
1103 |
|
|
|
1104 |
<p> |
|
|
1105 |
Using the <code>key</code> event to respond to specific users pressing specific keys or |
|
|
1106 |
or key combinations. |
|
|
1107 |
<a href="key.html">Read more...</a> |
|
|
1108 |
</p> |
|
|
1109 |
|
|
|
1110 |
<h3 id="responding-to-events-outside-of-a-node"><a href="outside.html">Responding to Events <em>outside</em> of a Node</a></h3> |
|
|
1111 |
|
|
|
1112 |
<p> |
|
|
1113 |
Details the host of "outside" events that can be used to trigger behavior |
|
|
1114 |
when users interact with element outside of the relevant Node. Think |
|
|
1115 |
closing popups if a user clicks somewhere else on the page. |
|
|
1116 |
<a href="outside.html">Read more...</a> |
|
|
1117 |
</p> |
|
|
1118 |
|
|
|
1119 |
<h3 id="monitoring-changes-to-input-and-textarea-values"><a href="valuechange.html">Monitoring Changes to <code><input></code> and <code><textarea></code> Values</a></h3> |
|
|
1120 |
|
|
|
1121 |
<p> |
|
|
1122 |
Using the <code>valuechange</code> event to catch the moments when a user types, cuts, |
|
|
1123 |
pastes, or otherwise alters the value in an input field. No, |
|
|
1124 |
<code>input.on('change', callback)</code> is not enough. |
|
|
1125 |
<a href="valuechange.html">Read more...</a> |
|
|
1126 |
</p> |
|
|
1127 |
|
|
|
1128 |
<h3 id="keyboard-accessible-contextmenu-events"><a href="contextmenu.html">Keyboard Accessible <code>contextmenu</code> Events</a></h3> |
|
|
1129 |
|
|
|
1130 |
<p> |
|
|
1131 |
Repairing cross browser keyboard support for the <code>contextmenu</code> event. |
|
|
1132 |
<a href="contextmenu.html">Read more...</a> |
|
|
1133 |
</p> |
|
|
1134 |
|
|
|
1135 |
<h3 id="the-tap-event"><a href="tap.html">The <code>tap</code> Event</a></h3> |
|
|
1136 |
|
|
|
1137 |
<p> |
|
|
1138 |
Using the <code>event-tap</code> module for fast-click on touch devices. |
|
|
1139 |
<a href="tap.html">Read more...</a> |
|
|
1140 |
</p> |
|
|
1141 |
|
|
|
1142 |
<h2 id="event-whitelist">Appendix A: Whitelisted DOM events</h2> |
|
|
1143 |
|
|
|
1144 |
<div id="events"> |
|
|
1145 |
<table> |
|
|
1146 |
<thead> |
|
|
1147 |
<tr> |
|
|
1148 |
<th>Event</th> |
|
|
1149 |
<th>Added by</th> |
|
|
1150 |
</tr> |
|
|
1151 |
</thead> |
|
|
1152 |
<tbody> |
|
|
1153 |
<tr> |
|
|
1154 |
<td>abort</td> |
|
|
1155 |
<td>node-base</td> |
|
|
1156 |
</tr> |
|
|
1157 |
<tr> |
|
|
1158 |
<td>beforeunload</td> |
|
|
1159 |
<td>node-base</td> |
|
|
1160 |
</tr> |
|
|
1161 |
<tr> |
|
|
1162 |
<td>blur</td> |
|
|
1163 |
<td>node-base</td> |
|
|
1164 |
</tr> |
|
|
1165 |
<tr> |
|
|
1166 |
<td>change</td> |
|
|
1167 |
<td>node-base</td> |
|
|
1168 |
</tr> |
|
|
1169 |
<tr> |
|
|
1170 |
<td>click</td> |
|
|
1171 |
<td>node-base</td> |
|
|
1172 |
</tr> |
|
|
1173 |
<tr> |
|
|
1174 |
<td>close</td> |
|
|
1175 |
<td>node-base</td> |
|
|
1176 |
</tr> |
|
|
1177 |
<tr> |
|
|
1178 |
<td>command</td> |
|
|
1179 |
<td>node-base</td> |
|
|
1180 |
</tr> |
|
|
1181 |
<tr> |
|
|
1182 |
<td>contextmenu</td> |
|
|
1183 |
<td>node-base</td> |
|
|
1184 |
</tr> |
|
|
1185 |
<tr> |
|
|
1186 |
<td>dblclick</td> |
|
|
1187 |
<td>node-base</td> |
|
|
1188 |
</tr> |
|
|
1189 |
<tr> |
|
|
1190 |
<td>DOMMouseScroll</td> |
|
|
1191 |
<td>node-base</td> |
|
|
1192 |
</tr> |
|
|
1193 |
<tr> |
|
|
1194 |
<td>drag</td> |
|
|
1195 |
<td>node-base</td> |
|
|
1196 |
</tr> |
|
|
1197 |
<tr> |
|
|
1198 |
<td>dragstart</td> |
|
|
1199 |
<td>node-base</td> |
|
|
1200 |
</tr> |
|
|
1201 |
<tr> |
|
|
1202 |
<td>dragenter</td> |
|
|
1203 |
<td>node-base</td> |
|
|
1204 |
</tr> |
|
|
1205 |
<tr> |
|
|
1206 |
<td>dragover</td> |
|
|
1207 |
<td>node-base</td> |
|
|
1208 |
</tr> |
|
|
1209 |
<tr> |
|
|
1210 |
<td>dragleave</td> |
|
|
1211 |
<td>node-base</td> |
|
|
1212 |
</tr> |
|
|
1213 |
<tr> |
|
|
1214 |
<td>dragend</td> |
|
|
1215 |
<td>node-base</td> |
|
|
1216 |
</tr> |
|
|
1217 |
<tr> |
|
|
1218 |
<td>drop</td> |
|
|
1219 |
<td>node-base</td> |
|
|
1220 |
</tr> |
|
|
1221 |
<tr> |
|
|
1222 |
<td>error</td> |
|
|
1223 |
<td>node-base</td> |
|
|
1224 |
</tr> |
|
|
1225 |
<tr> |
|
|
1226 |
<td>focus</td> |
|
|
1227 |
<td>node-base</td> |
|
|
1228 |
</tr> |
|
|
1229 |
<tr> |
|
|
1230 |
<td>key</td> |
|
|
1231 |
<td>node-base</td> |
|
|
1232 |
</tr> |
|
|
1233 |
<tr> |
|
|
1234 |
<td>keydown</td> |
|
|
1235 |
<td>node-base</td> |
|
|
1236 |
</tr> |
|
|
1237 |
<tr> |
|
|
1238 |
<td>keypress</td> |
|
|
1239 |
<td>node-base</td> |
|
|
1240 |
</tr> |
|
|
1241 |
<tr> |
|
|
1242 |
<td>keyup</td> |
|
|
1243 |
<td>node-base</td> |
|
|
1244 |
</tr> |
|
|
1245 |
<tr> |
|
|
1246 |
<td>load</td> |
|
|
1247 |
<td>node-base</td> |
|
|
1248 |
</tr> |
|
|
1249 |
<tr> |
|
|
1250 |
<td>message</td> |
|
|
1251 |
<td>node-base</td> |
|
|
1252 |
</tr> |
|
|
1253 |
<tr> |
|
|
1254 |
<td>mousedown</td> |
|
|
1255 |
<td>node-base</td> |
|
|
1256 |
</tr> |
|
|
1257 |
<tr> |
|
|
1258 |
<td>mouseenter</td> |
|
|
1259 |
<td>node-base</td> |
|
|
1260 |
</tr> |
|
|
1261 |
<tr> |
|
|
1262 |
<td>mouseleave</td> |
|
|
1263 |
<td>node-base</td> |
|
|
1264 |
</tr> |
|
|
1265 |
<tr> |
|
|
1266 |
<td>mousemove</td> |
|
|
1267 |
<td>node-base</td> |
|
|
1268 |
</tr> |
|
|
1269 |
<tr> |
|
|
1270 |
<td>mousemultiwheel</td> |
|
|
1271 |
<td>node-base</td> |
|
|
1272 |
</tr> |
|
|
1273 |
<tr> |
|
|
1274 |
<td>mouseout</td> |
|
|
1275 |
<td>node-base</td> |
|
|
1276 |
</tr> |
|
|
1277 |
<tr> |
|
|
1278 |
<td>mouseover</td> |
|
|
1279 |
<td>node-base</td> |
|
|
1280 |
</tr> |
|
|
1281 |
<tr> |
|
|
1282 |
<td>mouseup</td> |
|
|
1283 |
<td>node-base</td> |
|
|
1284 |
</tr> |
|
|
1285 |
<tr> |
|
|
1286 |
<td>mousewheel</td> |
|
|
1287 |
<td>node-base</td> |
|
|
1288 |
</tr> |
|
|
1289 |
<tr> |
|
|
1290 |
<td>orientationchange</td> |
|
|
1291 |
<td>node-base</td> |
|
|
1292 |
</tr> |
|
|
1293 |
<tr> |
|
|
1294 |
<td>reset</td> |
|
|
1295 |
<td>node-base</td> |
|
|
1296 |
</tr> |
|
|
1297 |
<tr> |
|
|
1298 |
<td>resize</td> |
|
|
1299 |
<td>node-base</td> |
|
|
1300 |
</tr> |
|
|
1301 |
<tr> |
|
|
1302 |
<td>select</td> |
|
|
1303 |
<td>node-base</td> |
|
|
1304 |
</tr> |
|
|
1305 |
<tr> |
|
|
1306 |
<td>selectstart</td> |
|
|
1307 |
<td>node-base</td> |
|
|
1308 |
</tr> |
|
|
1309 |
<tr> |
|
|
1310 |
<td>submit</td> |
|
|
1311 |
<td>node-base</td> |
|
|
1312 |
</tr> |
|
|
1313 |
<tr> |
|
|
1314 |
<td>scroll</td> |
|
|
1315 |
<td>node-base</td> |
|
|
1316 |
</tr> |
|
|
1317 |
<tr> |
|
|
1318 |
<td>tap</td> |
|
|
1319 |
<td>event-tap</td> |
|
|
1320 |
</tr> |
|
|
1321 |
<tr> |
|
|
1322 |
<td>textInput</td> |
|
|
1323 |
<td>node-base</td> |
|
|
1324 |
</tr> |
|
|
1325 |
<tr> |
|
|
1326 |
<td>unload</td> |
|
|
1327 |
<td>node-base</td> |
|
|
1328 |
</tr> |
|
|
1329 |
|
|
|
1330 |
<tr> |
|
|
1331 |
<td>DOMActivate</td> |
|
|
1332 |
<td>node-event-html5</td> |
|
|
1333 |
</tr> |
|
|
1334 |
<tr> |
|
|
1335 |
<td>DOMContentLoaded</td> |
|
|
1336 |
<td>node-event-html5</td> |
|
|
1337 |
</tr> |
|
|
1338 |
<tr> |
|
|
1339 |
<td>afterprint</td> |
|
|
1340 |
<td>node-event-html5</td> |
|
|
1341 |
</tr> |
|
|
1342 |
<tr> |
|
|
1343 |
<td>beforeprint</td> |
|
|
1344 |
<td>node-event-html5</td> |
|
|
1345 |
</tr> |
|
|
1346 |
<tr> |
|
|
1347 |
<td>canplay</td> |
|
|
1348 |
<td>node-event-html5</td> |
|
|
1349 |
</tr> |
|
|
1350 |
<tr> |
|
|
1351 |
<td>canplaythrough</td> |
|
|
1352 |
<td>node-event-html5</td> |
|
|
1353 |
</tr> |
|
|
1354 |
<tr> |
|
|
1355 |
<td>durationchange</td> |
|
|
1356 |
<td>node-event-html5</td> |
|
|
1357 |
</tr> |
|
|
1358 |
<tr> |
|
|
1359 |
<td>emptied</td> |
|
|
1360 |
<td>node-event-html5</td> |
|
|
1361 |
</tr> |
|
|
1362 |
<tr> |
|
|
1363 |
<td>ended</td> |
|
|
1364 |
<td>node-event-html5</td> |
|
|
1365 |
</tr> |
|
|
1366 |
<tr> |
|
|
1367 |
<td>formchange</td> |
|
|
1368 |
<td>node-event-html5</td> |
|
|
1369 |
</tr> |
|
|
1370 |
<tr> |
|
|
1371 |
<td>forminput</td> |
|
|
1372 |
<td>node-event-html5</td> |
|
|
1373 |
</tr> |
|
|
1374 |
<tr> |
|
|
1375 |
<td>hashchange</td> |
|
|
1376 |
<td>node-event-html5</td> |
|
|
1377 |
</tr> |
|
|
1378 |
<tr> |
|
|
1379 |
<td>input</td> |
|
|
1380 |
<td>node-event-html5</td> |
|
|
1381 |
</tr> |
|
|
1382 |
<tr> |
|
|
1383 |
<td>invalid</td> |
|
|
1384 |
<td>node-event-html5</td> |
|
|
1385 |
</tr> |
|
|
1386 |
<tr> |
|
|
1387 |
<td>loadedmetadata</td> |
|
|
1388 |
<td>node-event-html5</td> |
|
|
1389 |
</tr> |
|
|
1390 |
<tr> |
|
|
1391 |
<td>loadeddata</td> |
|
|
1392 |
<td>node-event-html5</td> |
|
|
1393 |
</tr> |
|
|
1394 |
<tr> |
|
|
1395 |
<td>loadstart</td> |
|
|
1396 |
<td>node-event-html5</td> |
|
|
1397 |
</tr> |
|
|
1398 |
<tr> |
|
|
1399 |
<td>offline</td> |
|
|
1400 |
<td>node-event-html5</td> |
|
|
1401 |
</tr> |
|
|
1402 |
<tr> |
|
|
1403 |
<td>online</td> |
|
|
1404 |
<td>node-event-html5</td> |
|
|
1405 |
</tr> |
|
|
1406 |
<tr> |
|
|
1407 |
<td>pagehide</td> |
|
|
1408 |
<td>node-event-html5</td> |
|
|
1409 |
</tr> |
|
|
1410 |
<tr> |
|
|
1411 |
<td>pageshow</td> |
|
|
1412 |
<td>node-event-html5</td> |
|
|
1413 |
</tr> |
|
|
1414 |
<tr> |
|
|
1415 |
<td>pause</td> |
|
|
1416 |
<td>node-event-html5</td> |
|
|
1417 |
</tr> |
|
|
1418 |
<tr> |
|
|
1419 |
<td>play</td> |
|
|
1420 |
<td>node-event-html5</td> |
|
|
1421 |
</tr> |
|
|
1422 |
<tr> |
|
|
1423 |
<td>playing</td> |
|
|
1424 |
<td>node-event-html5</td> |
|
|
1425 |
</tr> |
|
|
1426 |
<tr> |
|
|
1427 |
<td>popstate</td> |
|
|
1428 |
<td>node-event-html5 or history</td> |
|
|
1429 |
</tr> |
|
|
1430 |
<tr> |
|
|
1431 |
<td>progress</td> |
|
|
1432 |
<td>node-event-html5</td> |
|
|
1433 |
</tr> |
|
|
1434 |
<tr> |
|
|
1435 |
<td>ratechange</td> |
|
|
1436 |
<td>node-event-html5</td> |
|
|
1437 |
</tr> |
|
|
1438 |
<tr> |
|
|
1439 |
<td>readystatechange</td> |
|
|
1440 |
<td>node-event-html5</td> |
|
|
1441 |
</tr> |
|
|
1442 |
<tr> |
|
|
1443 |
<td>redo</td> |
|
|
1444 |
<td>node-event-html5</td> |
|
|
1445 |
</tr> |
|
|
1446 |
<tr> |
|
|
1447 |
<td>seeking</td> |
|
|
1448 |
<td>node-event-html5</td> |
|
|
1449 |
</tr> |
|
|
1450 |
<tr> |
|
|
1451 |
<td>seeked</td> |
|
|
1452 |
<td>node-event-html5</td> |
|
|
1453 |
</tr> |
|
|
1454 |
<tr> |
|
|
1455 |
<td>show</td> |
|
|
1456 |
<td>node-event-html5</td> |
|
|
1457 |
</tr> |
|
|
1458 |
<tr> |
|
|
1459 |
<td>stalled</td> |
|
|
1460 |
<td>node-event-html5</td> |
|
|
1461 |
</tr> |
|
|
1462 |
<tr> |
|
|
1463 |
<td>suspend</td> |
|
|
1464 |
<td>node-event-html5</td> |
|
|
1465 |
</tr> |
|
|
1466 |
<tr> |
|
|
1467 |
<td>timeupdate</td> |
|
|
1468 |
<td>node-event-html5</td> |
|
|
1469 |
</tr> |
|
|
1470 |
<tr> |
|
|
1471 |
<td>undo</td> |
|
|
1472 |
<td>node-event-html5</td> |
|
|
1473 |
</tr> |
|
|
1474 |
<tr> |
|
|
1475 |
<td>volumechange</td> |
|
|
1476 |
<td>node-event-html5</td> |
|
|
1477 |
</tr> |
|
|
1478 |
<tr> |
|
|
1479 |
<td>waiting</td> |
|
|
1480 |
<td>node-event-html5</td> |
|
|
1481 |
</tr> |
|
|
1482 |
|
|
|
1483 |
<tr> |
|
|
1484 |
<td>touchstart</td> |
|
|
1485 |
<td>event-touch</td> |
|
|
1486 |
</tr> |
|
|
1487 |
<tr> |
|
|
1488 |
<td>touchmove</td> |
|
|
1489 |
<td>event-touch</td> |
|
|
1490 |
</tr> |
|
|
1491 |
<tr> |
|
|
1492 |
<td>touchend</td> |
|
|
1493 |
<td>event-touch</td> |
|
|
1494 |
</tr> |
|
|
1495 |
<tr> |
|
|
1496 |
<td>touchcancel</td> |
|
|
1497 |
<td>event-touch</td> |
|
|
1498 |
</tr> |
|
|
1499 |
<tr> |
|
|
1500 |
<td>gesturestart</td> |
|
|
1501 |
<td>event-touch</td> |
|
|
1502 |
</tr> |
|
|
1503 |
<tr> |
|
|
1504 |
<td>gesturechange</td> |
|
|
1505 |
<td>event-touch</td> |
|
|
1506 |
</tr> |
|
|
1507 |
<tr> |
|
|
1508 |
<td>gestureend</td> |
|
|
1509 |
<td>event-touch</td> |
|
|
1510 |
</tr> |
|
|
1511 |
|
|
|
1512 |
<tr> |
|
|
1513 |
<td>transitionend or webkitTransitionEnd</td> |
|
|
1514 |
<td>transition</td> |
|
|
1515 |
</tr> |
|
|
1516 |
</tbody> |
|
|
1517 |
</table> |
|
|
1518 |
</div> |
|
|
1519 |
<script> |
|
|
1520 |
YUI({ filter: 'raw' }).use('selector-css3', 'datatable-sort', function (Y) { |
|
|
1521 |
var data = [], |
|
|
1522 |
node = Y.one('#events'); |
|
|
1523 |
|
|
|
1524 |
node.all('td:nth-of-type(1)').each(function (node, i) { |
|
|
1525 |
data.push({ |
|
|
1526 |
Event: node.get('text'), |
|
|
1527 |
"Added By": node.next().get('text') |
|
|
1528 |
}); |
|
|
1529 |
}); |
|
|
1530 |
|
|
|
1531 |
node.empty().addClass('yui3-skin-sam'); |
|
|
1532 |
|
|
|
1533 |
new Y.DataTable({ |
|
|
1534 |
columns : [ 'Event', 'Added By' ], |
|
|
1535 |
data : data, |
|
|
1536 |
sortable: true |
|
|
1537 |
}).render(node); |
|
|
1538 |
|
|
|
1539 |
}); |
|
|
1540 |
</script> |
|
|
1541 |
|
|
|
1542 |
<h4 id="adding-to-the-dom-event-whitelist">Adding to the DOM event whitelist</h4> |
|
|
1543 |
|
|
|
1544 |
<p>If you need to use an event that isn't included in this list, and not |
|
|
1545 |
supplied by a synthetic event, you can expand the whitelist by adding the event |
|
|
1546 |
names to the <code>Y.Node.DOM_EVENTS</code> object.</p> |
|
|
1547 |
|
|
|
1548 |
<pre class="code prettyprint">// Allow for subscription to some mostly cross-browser mutation events |
|
|
1549 |
Y.mix(Y.Node.DOM_EVENTS, { |
|
|
1550 |
DOMNodeInserted: true, |
|
|
1551 |
DOMNodeRemoved: true, |
|
|
1552 |
DOMCharacterDataModified: true |
|
|
1553 |
});</pre> |
|
|
1554 |
|
|
|
1555 |
|
|
|
1556 |
<h2 id="facade-properties">Appendix B: EventFacade properties and methods</h2> |
|
|
1557 |
|
|
|
1558 |
<h4 id="methods">Methods</h4> |
|
|
1559 |
<dl> |
|
|
1560 |
<dt><code>e.preventDefault()</code></dt> |
|
|
1561 |
<dd> |
|
|
1562 |
Prevents the default action associated with the event. E.g. page |
|
|
1563 |
navigation from an <a>nchor <code>click</code> or form submission and |
|
|
1564 |
page reload from a <form> <code>submit</code>. |
|
|
1565 |
</dd> |
|
|
1566 |
<dt><code>e.stopPropagation()</code></dt> |
|
|
1567 |
<dd> |
|
|
1568 |
Stops the event from bubbling further up the DOM tree. This does |
|
|
1569 |
not prevent the default action if there is one. Subsequent event |
|
|
1570 |
subscribers will be executed. |
|
|
1571 |
</dd> |
|
|
1572 |
<dt><code>e.stopImmediatePropagation()</code></dt> |
|
|
1573 |
<dd> |
|
|
1574 |
Stops the event from bubbling further up the DOM tree. This does |
|
|
1575 |
not prevent the default action if there is one. Subsequent event |
|
|
1576 |
subscribers will NOT be executed. |
|
|
1577 |
</dd> |
|
|
1578 |
<dt><code>e.halt( [immediate=false] )</code></dt> |
|
|
1579 |
<dd> |
|
|
1580 |
Alias for <code>e.preventDefault(); e.stopPropagation();</code> or |
|
|
1581 |
<code>e.preventDefault(); e.stopImmediatePropagation();</code>, depending on |
|
|
1582 |
the <em>immediate</em> parameter. |
|
|
1583 |
</dd> |
|
|
1584 |
</dl> |
|
|
1585 |
|
|
|
1586 |
<h4 id="basics">Basics</h4> |
|
|
1587 |
<dl> |
|
|
1588 |
<dt><code>e.type</code></dt> |
|
|
1589 |
<dd> |
|
|
1590 |
The name of the event. E.g. "click", "keyup", or "load". |
|
|
1591 |
</dd> |
|
|
1592 |
|
|
|
1593 |
<dt><code>e.target</code></dt> |
|
|
1594 |
<dd> |
|
|
1595 |
The Node instance that originated the event (see <a |
|
|
1596 |
href="delegation.html">the description of event delegation</a> for |
|
|
1597 |
reference) |
|
|
1598 |
</dd> |
|
|
1599 |
<dt><code>e.currentTarget</code></dt> |
|
|
1600 |
<dd> |
|
|
1601 |
The Node instance that subscribed to the event. In the case of |
|
|
1602 |
subscriptions from NodeLists, this is still the individual Node |
|
|
1603 |
instance (see <a href="#nodelist-this">When I subscribe to an event |
|
|
1604 |
from a NodeList, <code>this</code> is the NodeList...</a>). |
|
|
1605 |
</dd> |
|
|
1606 |
<dt><code>e.relatedTarget</code></dt> |
|
|
1607 |
<dd> |
|
|
1608 |
For <code>mouseover</code> events, this will be the Node instance of where the |
|
|
1609 |
mouse travelled <em>from</em>. For <code>mouseout</code>, it will be the Node |
|
|
1610 |
that the mouse travelled <em>to</em>. |
|
|
1611 |
</dd> |
|
|
1612 |
</dl> |
|
|
1613 |
|
|
|
1614 |
<h4 id="keyboard-event-properties">Keyboard event properties</h4> |
|
|
1615 |
<dt><code>e.keyCode</code></dt> |
|
|
1616 |
<dd> |
|
|
1617 |
The unicode value of a non-character key in a <code>keypress</code> event or |
|
|
1618 |
any key in <code>keydown</code> or <code>keyup</code>. See <a |
|
|
1619 |
href="https://developer.mozilla.org/en/DOM/event.keyCode">event.keyCode |
|
|
1620 |
on MDC</a>. |
|
|
1621 |
</dd> |
|
|
1622 |
<dt><code>e.charCode</code></dt> |
|
|
1623 |
<dd> |
|
|
1624 |
The Unicode value of a character key pressed during a keypress |
|
|
1625 |
event. See <a |
|
|
1626 |
href="https://developer.mozilla.org/en/DOM/event.charCode">event.charCode |
|
|
1627 |
on MDC</a>. |
|
|
1628 |
</dd> |
|
|
1629 |
<dt><code>e.shiftKey</code></dt> |
|
|
1630 |
<dd> |
|
|
1631 |
<code>true</code> if the shift key was depressed during a key event. |
|
|
1632 |
</dd> |
|
|
1633 |
<dt><code>e.ctrlKey</code></dt> |
|
|
1634 |
<dd> |
|
|
1635 |
<code>true</code> if the control key was depressed during a key event. |
|
|
1636 |
</dd> |
|
|
1637 |
<dt><code>e.altKey</code></dt> |
|
|
1638 |
<dd> |
|
|
1639 |
<code>true</code> if the alt/option key was depressed during a key event. |
|
|
1640 |
</dd> |
|
|
1641 |
<dt><code>e.metaKey</code></dt> |
|
|
1642 |
<dd> |
|
|
1643 |
<code>true</code> if the "Windows" key on PCs or command key on Macs was |
|
|
1644 |
depressed during a key event. |
|
|
1645 |
</dd> |
|
|
1646 |
</dl> |
|
|
1647 |
|
|
|
1648 |
<h4 id="mouse-event-properties">Mouse event properties</h4> |
|
|
1649 |
<dt><code>e.button</code></dt> |
|
|
1650 |
<dd> |
|
|
1651 |
For <code>mouseup</code> events (<em>NOT <code>click</code> events</em>), indicates |
|
|
1652 |
which mouse button is pressed.<br> |
|
|
1653 |
<code>1</code> = left click, <code>2</code> = middle click, <code>3</code> = right click. |
|
|
1654 |
</dd> |
|
|
1655 |
<dt><code>e.which</code></dt> |
|
|
1656 |
<dd> |
|
|
1657 |
Alias for e.button. |
|
|
1658 |
</dd> |
|
|
1659 |
|
|
|
1660 |
<dt><code>e.pageX</code></dt> |
|
|
1661 |
<dd> |
|
|
1662 |
The horizontal coordinate of the event relative to whole document. |
|
|
1663 |
</dd> |
|
|
1664 |
<dt><code>e.pageY</code></dt> |
|
|
1665 |
<dd> |
|
|
1666 |
The vertical coordinate of the event relative to whole document. |
|
|
1667 |
</dd> |
|
|
1668 |
<dt><code>e.clientX</code></dt> |
|
|
1669 |
<dd> |
|
|
1670 |
The horizontal coordinate of the event relative to viewport, |
|
|
1671 |
regardless of scrolling. |
|
|
1672 |
</dd> |
|
|
1673 |
<dt><code>e.clientY</code></dt> |
|
|
1674 |
<dd> |
|
|
1675 |
The vertical coordinate of the event relative to viewport, |
|
|
1676 |
regardless of scrolling. |
|
|
1677 |
</dd> |
|
|
1678 |
|
|
|
1679 |
<dt>[<code>e.wheelDelta</code>]</dt> |
|
|
1680 |
<dd> |
|
|
1681 |
For <code>mousewheel</code> or <code>DOMMouseScroll</code> events, the pixel distance of |
|
|
1682 |
the scroll. |
|
|
1683 |
</dd> |
|
|
1684 |
</dl> |
|
|
1685 |
|
|
|
1686 |
<h4 id="touch-event-properties">Touch event properties</h4> |
|
|
1687 |
<dl> |
|
|
1688 |
<dt>[<code>e.touches</code>]</dt> |
|
|
1689 |
<dd> |
|
|
1690 |
<p> |
|
|
1691 |
An array of <code>Touch</code> objects, where each <code>Touch</code> object represents a finger |
|
|
1692 |
currently touching the surface (regardless of the target of the current event). |
|
|
1693 |
For example, if you have two fingers on the surface, this array would have two |
|
|
1694 |
<code>Touch</code> objects, one for each finger. |
|
|
1695 |
</p> |
|
|
1696 |
|
|
|
1697 |
<p> |
|
|
1698 |
The common set of properties currently on a <code>Touch</code> object, which can be |
|
|
1699 |
relied up across environments, are <code>target</code>, <code>clientX</code>, <code>clientY</code>, <code>pageX</code>, |
|
|
1700 |
<code>pageY</code>, <code>screenX</code>, <code>screenY</code> and <code>identifier</code>. |
|
|
1701 |
</p> |
|
|
1702 |
</dd> |
|
|
1703 |
<dt>[<code>e.targetTouches</code>]</dt> |
|
|
1704 |
<dd> |
|
|
1705 |
<p> |
|
|
1706 |
An array of <code>Touch</code> objects for every point of contact that is touching the |
|
|
1707 |
surface, and started on the element that is the target of the current event. |
|
|
1708 |
</p> |
|
|
1709 |
</dd> |
|
|
1710 |
<dt>[<code>e.changedTouches</code>]</dt> |
|
|
1711 |
<dd> |
|
|
1712 |
<p> |
|
|
1713 |
An array of <code>Touch</code> objects representing all touches that changed in this event. |
|
|
1714 |
</p> |
|
|
1715 |
|
|
|
1716 |
<p> |
|
|
1717 |
This property is most useful in <code>touchEnd</code> events, to identify the set of touches |
|
|
1718 |
which were removed from the surface, which resulted in the firing of the event. |
|
|
1719 |
</p> |
|
|
1720 |
</dd> |
|
|
1721 |
</dl> |
|
|
1722 |
|
|
|
1723 |
<h4 id="gesture-event-properties-currently-ios-specific">Gesture event properties (currently iOS specific)</h4> |
|
|
1724 |
<p>These properties are unique to Webkit on iOS currently, and are provided on the event facade when listening for the iOS <code>gesturestart</code>, <code>gesturechange</code> and <code>gestureend</code> multi-touch events.</p> |
|
|
1725 |
<dl> |
|
|
1726 |
<dt>[<code>e.scale</code>]</dt> |
|
|
1727 |
<dd> |
|
|
1728 |
See Apple's documentation for <a href="http://developer.apple.com/library/safari/documentation/UserExperience/Reference/GestureEventClassReference/GestureEvent/GestureEvent.html#//apple_ref/javascript/instp/GestureEvent/scale">scale</a>. |
|
|
1729 |
</dd> |
|
|
1730 |
<dt>[<code>e.rotation</code>]</dt> |
|
|
1731 |
<dd> |
|
|
1732 |
See Apple's documentation for <a href="http://developer.apple.com/library/safari/documentation/UserExperience/Reference/GestureEventClassReference/GestureEvent/GestureEvent.html#//apple_ref/javascript/instp/GestureEvent/rotation">rotation</a>. |
|
|
1733 |
</dd> |
|
|
1734 |
</dl> |
|
|
1735 |
|
|
|
1736 |
<p>See the <a href="http://www.w3.org/TR/touch-events/">W3C Touch Events Specification</a>, derived from the Webkit model, for more details.</p> |
|
|
1737 |
|
|
|
1738 |
<p>Synthetic events may add or modify event facade properties. These should be included in the documentation for the specific synthetic event.</p> |
|
|
1739 |
|
|
|
1740 |
<p>For more details, check out the <a |
|
|
1741 |
href="https://developer.mozilla.org/en/DOM/event#Properties">MDC |
|
|
1742 |
documentation</a>.</p> |
|
|
1743 |
</div> |
|
|
1744 |
</div> |
|
|
1745 |
</div> |
|
|
1746 |
|
|
|
1747 |
<div class="yui3-u-1-4"> |
|
|
1748 |
<div class="sidebar"> |
|
|
1749 |
|
|
|
1750 |
<div id="toc" class="sidebox"> |
|
|
1751 |
<div class="hd"> |
|
|
1752 |
<h2 class="no-toc">Table of Contents</h2> |
|
|
1753 |
</div> |
|
|
1754 |
|
|
|
1755 |
<div class="bd"> |
|
|
1756 |
<ul class="toc"> |
|
|
1757 |
<li> |
|
|
1758 |
<a href="#getting-started">Getting Started</a> |
|
|
1759 |
</li> |
|
|
1760 |
<li> |
|
|
1761 |
<a href="#the-basics">The Basics</a> |
|
|
1762 |
<ul class="toc"> |
|
|
1763 |
<li> |
|
|
1764 |
<a href="#listening-for-events">Listening for events</a> |
|
|
1765 |
</li> |
|
|
1766 |
<li> |
|
|
1767 |
<a href="#the-callback-and-the-event-object">The Callback and the Event Object</a> |
|
|
1768 |
</li> |
|
|
1769 |
<li> |
|
|
1770 |
<a href="#epreventdefault-and-estoppropagation"><code>e.preventDefault()</code> and <code>e.stopPropagation()</code></a> |
|
|
1771 |
</li> |
|
|
1772 |
<li> |
|
|
1773 |
<a href="#detaching-subscriptions">Detaching subscriptions</a> |
|
|
1774 |
</li> |
|
|
1775 |
</ul> |
|
|
1776 |
</li> |
|
|
1777 |
<li> |
|
|
1778 |
<a href="#modules">What to <code>use()</code></a> |
|
|
1779 |
</li> |
|
|
1780 |
<li> |
|
|
1781 |
<a href="#delegation">Event Delegation</a> |
|
|
1782 |
</li> |
|
|
1783 |
<li> |
|
|
1784 |
<a href="#more">More Event API Goodness</a> |
|
|
1785 |
<ul class="toc"> |
|
|
1786 |
<li> |
|
|
1787 |
<a href="#y-on">Subscribe from <code>Y</code></a> |
|
|
1788 |
</li> |
|
|
1789 |
<li> |
|
|
1790 |
<a href="#once">One time subscriptions</a> |
|
|
1791 |
</li> |
|
|
1792 |
<li> |
|
|
1793 |
<a href="#grouping-subscriptions">Grouping subscriptions</a> |
|
|
1794 |
</li> |
|
|
1795 |
<li> |
|
|
1796 |
<a href="#extended-signature">Binding <code>this</code> and additional callback arguments</a> |
|
|
1797 |
</li> |
|
|
1798 |
<li> |
|
|
1799 |
<a href="#detach-methods">More ways to clean up subscriptions</a> |
|
|
1800 |
</li> |
|
|
1801 |
</ul> |
|
|
1802 |
</li> |
|
|
1803 |
<li> |
|
|
1804 |
<a href="#simulate">Simulate browser events</a> |
|
|
1805 |
</li> |
|
|
1806 |
<li> |
|
|
1807 |
<a href="#synthetic-events">Synthetic Events</a> |
|
|
1808 |
<ul class="toc"> |
|
|
1809 |
<li> |
|
|
1810 |
<a href="#creating-dom-events">Creating DOM events</a> |
|
|
1811 |
</li> |
|
|
1812 |
</ul> |
|
|
1813 |
</li> |
|
|
1814 |
<li> |
|
|
1815 |
<a href="#troubleshootingfaq">Troubleshooting/FAQ</a> |
|
|
1816 |
<ul class="toc"> |
|
|
1817 |
<li> |
|
|
1818 |
<a href="#function-reference">My callback is executing at the wrong time. What's going on?</a> |
|
|
1819 |
</li> |
|
|
1820 |
<li> |
|
|
1821 |
<a href="#wrong-this">I'm getting an error in my callback that "<code>(some object) has no method (someMethodOnMyObject)</code>". What am I missing?</a> |
|
|
1822 |
</li> |
|
|
1823 |
<li> |
|
|
1824 |
<a href="#which-events">What events can I subscribe to?</a> |
|
|
1825 |
</li> |
|
|
1826 |
<li> |
|
|
1827 |
<a href="#why-on-no-chain">Why isn't on() chainable?</a> |
|
|
1828 |
</li> |
|
|
1829 |
<li> |
|
|
1830 |
<a href="#y-on-vs-node-on">Why would I use <code>Y.on()</code> or <code>Y.delegate()</code> instead of <code>node.on()</code> and <code>node.delegate()</code>?</a> |
|
|
1831 |
</li> |
|
|
1832 |
<li> |
|
|
1833 |
<a href="#after"><code>EventTarget</code> also provides an <code>after()</code> method. How does that work for DOM events?</a> |
|
|
1834 |
</li> |
|
|
1835 |
<li> |
|
|
1836 |
<a href="#nodelist-this">When I subscribe to an event from a NodeList, <code>this</code> is the NodeList, not the individual Node. What's up with that?</a> |
|
|
1837 |
</li> |
|
|
1838 |
<li> |
|
|
1839 |
<a href="#nodelist-delegate">Where is <code>nodelist.delegate()</code>?</a> |
|
|
1840 |
</li> |
|
|
1841 |
</ul> |
|
|
1842 |
</li> |
|
|
1843 |
<li> |
|
|
1844 |
<a href="#more-reading">More Reading</a> |
|
|
1845 |
<ul class="toc"> |
|
|
1846 |
<li> |
|
|
1847 |
<a href="#page-lifecycle-events"><a href="domready.html">Page Lifecycle events</a></a> |
|
|
1848 |
</li> |
|
|
1849 |
<li> |
|
|
1850 |
<a href="#event-delegation"><a href="delegation.html">Event Delegation</a></a> |
|
|
1851 |
</li> |
|
|
1852 |
<li> |
|
|
1853 |
<a href="#event-simulation"><a href="simulate.html">Event Simulation</a></a> |
|
|
1854 |
</li> |
|
|
1855 |
<li> |
|
|
1856 |
<a href="#create-new-dom-events"><a href="synths.html">Create New DOM Events</a></a> |
|
|
1857 |
</li> |
|
|
1858 |
<li> |
|
|
1859 |
<a href="#working-with-touch-events"><a href="touch.html">Working With Touch Events</a></a> |
|
|
1860 |
</li> |
|
|
1861 |
<li> |
|
|
1862 |
<a href="#delegating-the-focus-and-blur-events"><a href="focus.html">Delegating the <code>focus</code> and <code>blur</code> Events</a></a> |
|
|
1863 |
</li> |
|
|
1864 |
<li> |
|
|
1865 |
<a href="#the-hover-mouseenter-and-mouseleave-events"><a href="mouseenter.html">The <code>hover</code>, <code>mouseenter</code>, and <code>mouseleave</code> Events</a></a> |
|
|
1866 |
</li> |
|
|
1867 |
<li> |
|
|
1868 |
<a href="#complex-keyboard-input-filtering"><a href="key.html">Complex Keyboard Input Filtering</a></a> |
|
|
1869 |
</li> |
|
|
1870 |
<li> |
|
|
1871 |
<a href="#responding-to-events-outside-of-a-node"><a href="outside.html">Responding to Events <em>outside</em> of a Node</a></a> |
|
|
1872 |
</li> |
|
|
1873 |
<li> |
|
|
1874 |
<a href="#monitoring-changes-to-input-and-textarea-values"><a href="valuechange.html">Monitoring Changes to <code><input></code> and <code><textarea></code> Values</a></a> |
|
|
1875 |
</li> |
|
|
1876 |
<li> |
|
|
1877 |
<a href="#keyboard-accessible-contextmenu-events"><a href="contextmenu.html">Keyboard Accessible <code>contextmenu</code> Events</a></a> |
|
|
1878 |
</li> |
|
|
1879 |
<li> |
|
|
1880 |
<a href="#the-tap-event"><a href="tap.html">The <code>tap</code> Event</a></a> |
|
|
1881 |
</li> |
|
|
1882 |
</ul> |
|
|
1883 |
</li> |
|
|
1884 |
<li> |
|
|
1885 |
<a href="#event-whitelist">Appendix A: Whitelisted DOM events</a> |
|
|
1886 |
<ul class="toc"> |
|
|
1887 |
<li> |
|
|
1888 |
<a href="#adding-to-the-dom-event-whitelist">Adding to the DOM event whitelist</a> |
|
|
1889 |
</li> |
|
|
1890 |
</ul> |
|
|
1891 |
</li> |
|
|
1892 |
<li> |
|
|
1893 |
<a href="#facade-properties">Appendix B: EventFacade properties and methods</a> |
|
|
1894 |
<ul class="toc"> |
|
|
1895 |
<li> |
|
|
1896 |
<a href="#methods">Methods</a> |
|
|
1897 |
</li> |
|
|
1898 |
<li> |
|
|
1899 |
<a href="#basics">Basics</a> |
|
|
1900 |
</li> |
|
|
1901 |
<li> |
|
|
1902 |
<a href="#keyboard-event-properties">Keyboard event properties</a> |
|
|
1903 |
</li> |
|
|
1904 |
<li> |
|
|
1905 |
<a href="#mouse-event-properties">Mouse event properties</a> |
|
|
1906 |
</li> |
|
|
1907 |
<li> |
|
|
1908 |
<a href="#touch-event-properties">Touch event properties</a> |
|
|
1909 |
</li> |
|
|
1910 |
<li> |
|
|
1911 |
<a href="#gesture-event-properties-currently-ios-specific">Gesture event properties (currently iOS specific)</a> |
|
|
1912 |
</li> |
|
|
1913 |
</ul> |
|
|
1914 |
</li> |
|
|
1915 |
</ul> |
|
|
1916 |
</div> |
|
|
1917 |
</div> |
|
|
1918 |
|
|
|
1919 |
|
|
|
1920 |
|
|
|
1921 |
<div class="sidebox"> |
|
|
1922 |
<div class="hd"> |
|
|
1923 |
<h2 class="no-toc">Examples</h2> |
|
|
1924 |
</div> |
|
|
1925 |
|
|
|
1926 |
<div class="bd"> |
|
|
1927 |
<ul class="examples"> |
|
|
1928 |
|
|
|
1929 |
|
|
|
1930 |
<li data-description="Use the Event Utility to attach simple DOM event handlers."> |
|
|
1931 |
<a href="basic-example.html">Simple DOM Events</a> |
|
|
1932 |
</li> |
|
|
1933 |
|
|
|
1934 |
|
|
|
1935 |
|
|
|
1936 |
<li data-description="Using the synthetic event API to create a DOM event that fires in response to arrow keys being pressed."> |
|
|
1937 |
<a href="synth-example.html">Creating an Arrow Event for DOM Subscription</a> |
|
|
1938 |
</li> |
|
|
1939 |
|
|
|
1940 |
|
|
|
1941 |
|
|
|
1942 |
<li data-description="Supporting cross-device swipe gestures, using the event-move gesture events"> |
|
|
1943 |
<a href="swipe-example.html">Supporting A Swipe Left Gesture</a> |
|
|
1944 |
</li> |
|
|
1945 |
|
|
|
1946 |
|
|
|
1947 |
|
|
|
1948 |
|
|
|
1949 |
|
|
|
1950 |
|
|
|
1951 |
|
|
|
1952 |
|
|
|
1953 |
|
|
|
1954 |
|
|
|
1955 |
|
|
|
1956 |
|
|
|
1957 |
</ul> |
|
|
1958 |
</div> |
|
|
1959 |
</div> |
|
|
1960 |
|
|
|
1961 |
|
|
|
1962 |
|
|
|
1963 |
<div class="sidebox"> |
|
|
1964 |
<div class="hd"> |
|
|
1965 |
<h2 class="no-toc">Examples That Use This Component</h2> |
|
|
1966 |
</div> |
|
|
1967 |
|
|
|
1968 |
<div class="bd"> |
|
|
1969 |
<ul class="examples"> |
|
|
1970 |
|
|
|
1971 |
|
|
|
1972 |
|
|
|
1973 |
|
|
|
1974 |
|
|
|
1975 |
|
|
|
1976 |
|
|
|
1977 |
|
|
|
1978 |
<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."> |
|
|
1979 |
<a href="../node-focusmanager/node-focusmanager-button.html">Accessible Menu Button</a> |
|
|
1980 |
</li> |
|
|
1981 |
|
|
|
1982 |
|
|
|
1983 |
|
|
|
1984 |
<li data-description="Shows how to extend the base widget class, to create your own Widgets."> |
|
|
1985 |
<a href="../widget/widget-extend.html">Extending the Base Widget Class</a> |
|
|
1986 |
</li> |
|
|
1987 |
|
|
|
1988 |
|
|
|
1989 |
|
|
|
1990 |
<li data-description="Example Photo Browser application."> |
|
|
1991 |
<a href="../dd/photo-browser.html">Photo Browser</a> |
|
|
1992 |
</li> |
|
|
1993 |
|
|
|
1994 |
|
|
|
1995 |
|
|
|
1996 |
<li data-description="Portal style example using Drag & Drop Event Bubbling and Animation."> |
|
|
1997 |
<a href="../dd/portal-drag.html">Portal Style Example</a> |
|
|
1998 |
</li> |
|
|
1999 |
|
|
|
2000 |
|
|
|
2001 |
|
|
|
2002 |
<li data-description="Use IO to request data over HTTP."> |
|
|
2003 |
<a href="../io/get.html">HTTP GET to request data</a> |
|
|
2004 |
</li> |
|
|
2005 |
|
|
|
2006 |
|
|
|
2007 |
</ul> |
|
|
2008 |
</div> |
|
|
2009 |
</div> |
|
|
2010 |
|
|
|
2011 |
</div> |
|
|
2012 |
</div> |
|
|
2013 |
</div> |
|
|
2014 |
</div> |
|
|
2015 |
|
|
|
2016 |
<script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
|
2017 |
<script>prettyPrint();</script> |
|
|
2018 |
|
|
|
2019 |
<script> |
|
|
2020 |
YUI.Env.Tests = { |
|
|
2021 |
examples: [], |
|
|
2022 |
project: '../assets', |
|
|
2023 |
assets: '../assets/event', |
|
|
2024 |
name: 'event', |
|
|
2025 |
title: 'Event', |
|
|
2026 |
newWindow: '', |
|
|
2027 |
auto: false |
|
|
2028 |
}; |
|
|
2029 |
YUI.Env.Tests.examples.push('basic-example'); |
|
|
2030 |
YUI.Env.Tests.examples.push('synth-example'); |
|
|
2031 |
YUI.Env.Tests.examples.push('swipe-example'); |
|
|
2032 |
YUI.Env.Tests.examples.push('node-focusmanager-button'); |
|
|
2033 |
YUI.Env.Tests.examples.push('widget-extend'); |
|
|
2034 |
YUI.Env.Tests.examples.push('photo-browser'); |
|
|
2035 |
YUI.Env.Tests.examples.push('portal-drag'); |
|
|
2036 |
YUI.Env.Tests.examples.push('get'); |
|
|
2037 |
|
|
|
2038 |
</script> |
|
|
2039 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
2040 |
|
|
|
2041 |
|
|
|
2042 |
|
|
|
2043 |
</body> |
|
|
2044 |
</html> |