Event Class
+ + + + +The event utility provides functions to add and remove event listeners, +event cleansing. It also tries to automatically remove listeners it +registers during the unload event.
+-
+
- Index + + +
- Methods + + +
- Properties + + + +
- Events + +
Item Index
+ + +Methods
+ +-
+
+
- + _applyFilter + + + + + +
- + _calculateDefaultPoint + + + + + +
- + _clean + + + static + + + + +
- + _createTouchList + + + + + +
- + _getDims + + + + + +
- + _getEmptyTouchList + + + + + +
- + _isSingleTouch + + + + + +
- + _isValidCollection + + + static + + + deprecated + + + +
- + _load + + + static + + + + +
- + _move + + + + + +
- + _poll + + + static + + + + +
- + _simulateEvent + + + + + +
- + _toRadian + + + + + +
- + _unload + + + static + + + + +
- + attach + + + static + + + + +
- + compileFilter + + + static + + + + +
- + define + + + static + + + + +
- + defineOutside + + + static + + + + +
- + delegate + + + static + + + + +
- + delegate + + + static + + + + +
- + detach + + + static + + + + +
- + detach + + + static + + + + +
- + detachDelegate + + + static + + + + +
- + flick + + + + + +
- + generateId + + + static + + + + +
- + getEvent + + + static + + + + +
- + getListeners + + + static + + + + +
- + move + + + + + +
- + nativeAdd + + + static + + + + +
- + nativeRemove + + + static + + + + +
- + notifySub + + + static + + + + +
- + on + + + static + + + + +
- + onAvailable + + + static + + + deprecated + + + +
- + onContentReady + + + static + + + deprecated + + + +
- + pinch + + + + + +
- + purgeElement + + + static + + + + +
- + rotate + + + + + +
- + simulate + + + static + + + + +
- + simulateGesture + + + static + + + + +
- + startInterval + + + static + + + + +
- + tap + + + + + +
- + touchEnd + + + static + + + + +
- + touchMove + + + static + + + + +
- + touchStart + + + static + + + + +
Properties
+ +-
+
+
- + _avail + + + static + + + + +
- + _disabledRE + + + + + +
- + _dri + + + static + + + + +
- + _el_events + + + static + + + + +
- + _interval + + + static + + + + +
- + _loadComplete + + + static + + + + +
- + _retryCount + + + static + + + + +
- + _wrappers + + + static + + + + +
- + DOMReady + + + static + + + + +
- + lastError + + + static + + + + +
- + POLL_INTERVAL + + + static + + + + +
- + POLL_RETRYS + + + static + + + + +
Events
+ +-
+
+
- + tap + + + + + +
Methods
+ + +_applyFilter
+
+
+ -
+
+
-
+
+
filter+ +
+
+ -
+
+
args+ +
+
+ -
+
+
ce+ +
+
+
Walks up the parent axis of an event's target, and tests each element +against a supplied filter function. If any Nodes, including the container, +satisfy the filter, the delegated callback will be triggered for each.
+ +Hosted as a protected property of the delegate method (e.g.
+Y.delegate._applyFilter).
Parameters:
+ +-
+
+
-
+
+
filter+ Function + + + + +++ + +boolean function to test for inclusion in event + notification
+
+
+ -
+
+
args+ Array + + + + +++ + +the arguments that would be passed to subscribers
+
+
+ -
+
+
ce+ CustomEvent + + + + +++ + +the DOM event wrapper
+
+
+
_calculateDefaultPoint
+
+
+ -
+
+
-
+
+
point+ +
+
+
Helper method to convert a point relative to the node element into +the point in the page coordination.
+Parameters:
+ +-
+
+
-
+
+
point+ Array + + + + +++ + +A point relative to the node element.
+
+
+
Returns:
+ +_clean
+
+
+ -
+
+
-
+
+
wrapper+ +
+
+
Removes all object references and the DOM proxy subscription for +a given event for a DOM node.
+Parameters:
+ +-
+
+
-
+
+
wrapper+ CustomEvent + + + + +++ + +Custom event proxy for the DOM + subscription
+
+
+
_createTouchList
+
+
+ -
+
+
-
+
+
touchPoints+ +
+
+
Helper method to convert an array with touch points to TouchList object as +defined in http://www.w3.org/TR/touch-events/
+Parameters:
+ +-
+
+
-
+
+
touchPoints+ Array + + + + ++ ++ + +
+
+
Returns:
+ +_getDims
+
+
+ ()
+
+
+
+
+ Array
+
+
+
+
+
+
+ private
+
+
+
+
+
+
+
+
+
+
+
+
+ Helper method to get height/width while accounting for +rotation/scale transforms where possible by using the +bounding client rectangle height/width instead of the +offsetWidth/Height which region uses.
+Returns:
+ +_getEmptyTouchList
+
+
+ ()
+
+
+
+
+ TouchList | Array
+
+
+
+
+
+
+ private
+
+
+
+
+
+
+
+
+
+
+
+
+ Helper method to return a singleton instance of empty touch list.
+Returns:
+ +_isSingleTouch
+
+
+ -
+
+
-
+
+
touches+ +
+
+ -
+
+
targetTouches+ +
+
+ -
+
+
changedTouches+ +
+
+
Helper method to check the single touch.
+Parameters:
+ +-
+
+
-
+
+
touches+ TouchList + + + + ++ ++ + +
+
+ -
+
+
targetTouches+ TouchList + + + + ++ ++ + +
+
+ -
+
+
changedTouches+ TouchList + + + + ++ ++ + +
+
+
_isValidCollection
+
+
+ -
+
+
-
+
+
o+ +
+
+
We want to be able to use getElementsByTagName as a collection +to attach a group of events to. Unfortunately, different +browsers return different types of collections. This function +tests to determine if the object is array-like. It will also +fail if the object is an array, but is empty.
+Parameters:
+ +-
+
+
-
+
+
o+ Object + + + + +++ + +the object to test
+
+
+
Returns:
+ +_load
+
+
+ ()
+
+
+
+
+
+
+
+ private
+
+
+
+
+
+ static
+
+
+
+
+
+
+
+
+ hook up any deferred listeners
+_move
+
+
+ -
+
+
-
+
+
cb+ +
+
+ -
+
+
path+ +
+
+ -
+
+
duration+ +
+
+
A base method on top of "move" and "flick" methods. The method takes +the path with start/end properties and duration to generate a set of +touch events for the movement gesture.
+Parameters:
+ +-
+
+
-
+
+
cb+ Function + + + + +++ + +The callback to execute when the gesture simulation + is completed.
+
+
+ -
+
+
path+ Object + + + + +++ + +An object with "start" and "end" properties. Each + property should be an array with x and y coordination (e.g. start: [100, 50])
+
+
+ -
+
+
duration+ Number + + + + +++ + +A duration of the gesture in millisecond.
+
+
+
_poll
+
+
+ ()
+
+
+
+
+
+
+
+ private
+
+
+
+
+
+ static
+
+
+
+
+
+
+
+
+ Polling function that runs before the onload event fires, +attempting to attach to DOM Nodes as soon as they are +available
+_simulateEvent
+
+
+ -
+
+
-
+
+
target+ +
+
+ -
+
+
type+ +
+
+ -
+
+
options+ +
+
+
Parameters:
+ +-
+
+
-
+
+
target+ HTMLElement + + + + +++ + +The DOM element that's the target of the event.
+
+
+ -
+
+
type+ String + + + + +++ + +The type of event or name of the supported gesture to simulate + (i.e., "click", "doubletap", "flick").
+
+
+ -
+
+
options+ Object + + + + +++ + +(Optional) Extra options to copy onto the event object. + For gestures, options are used to refine the gesture behavior.
+
+
+
Returns:
+ +_toRadian
+
+
+ -
+
+
-
+
+
deg+ +
+
+
Helper method to convert a degree to a radian.
+Parameters:
+ +-
+
+
-
+
+
deg+ Number + + + + +++ + +A degree to be converted to a radian.
+
+
+
Returns:
+ +_unload
+
+
+ ()
+
+
+
+
+
+
+
+ private
+
+
+
+
+
+ static
+
+
+
+
+
+
+
+
+ Removes all listeners registered by pe.event. Called +automatically during the unload event.
+attach
+
+
+ -
+
+
-
+
+
type+ +
+
+ -
+
+
fn+ +
+
+ -
+
+
el+ +
+
+ -
+
+
context+ +
+
+ -
+
+
args+ +
+
+
Adds an event listener
+Parameters:
+ +-
+
+
-
+
+
type+ String + + + + +++ + +The type of event to append
+
+
+ -
+
+
fn+ Function + + + + +++ + +The method the event invokes
+
+
+ -
+
+
el+ String | HTMLElement | Array | NodeList + + + + +++ + +An id, an element + reference, or a collection of ids and/or elements to assign the + listener to.
+
+
+ -
+
+
context+ Object + + + + +++ + +optional context object
+
+
+ -
+
+
args+ Boolean | Object + + + + +++ + +0..n arguments to pass to the callback
+
+
+
Returns:
+ +compileFilter
+
+
+ -
+
+
-
+
+
selector+ +
+
+
Compiles a selector string into a filter function to identify whether +Nodes along the parent axis of an event's target should trigger event +notification.
+ +This function is memoized, so previously compiled filter functions are +returned if the same selector string is provided.
+ +This function may be useful when defining synthetic events for delegate +handling.
+ +Hosted as a property of the delegate method (e.g. Y.delegate.compileFilter).
Parameters:
+ +-
+
+
-
+
+
selector+ String + + + + +++ + +the selector string to base the filtration on
+
+
+
Returns:
+ +define
+
+
+ -
+
+
-
+
+
type+ +
+
+ -
+
+
config+ +
+
+ -
+
+
force+ +
+
+
Defines a new event in the DOM event system. Implementers are +responsible for monitoring for a scenario whereby the event is fired. A +notifier object is provided to the functions identified below. When the +criteria defining the event are met, call notifier.fire( [args] ); to +execute event subscribers.
+ +The first parameter is the name of the event. The second parameter is a
+configuration object which define the behavior of the event system when the
+new event is subscribed to or detached from. The methods that should be
+defined in this configuration object are on,
+detach, delegate, and detachDelegate.
+You are free to define any other methods or properties needed to define your
+event. Be aware, however, that since the object is used to subclass
+SyntheticEvent, you should avoid method names used by SyntheticEvent unless
+your intention is to override the default behavior.
This is a list of properties and methods that you can or should specify +in the configuration object:
+ +-
+
on
+ function (node, subscription, notifier)The + implementation logic for subscription. Any special setup you need to + do to create the environment for the event being fired--E.g. native + DOM event subscriptions. Store subscription related objects and + state on thesubscriptionobject. When the + criteria have been met to fire the synthetic event, call +notifier.fire(e). See Notifier'sfire()+ method for details about what to pass as parameters.
+
+ detach
+ function (node, subscription, notifier)The + implementation logic for cleaning up a detached subscription. E.g. + detach any DOM subscriptions added inon.
+
+ delegate
+ function (node, subscription, notifier, filter)The + implementation logic for subscription viaY.delegateor +node.delegate. The filter is typically either a selector + string or a function. You can use +Y.delegate.compileFilter(selectorString)to create a + filter function from a selector string if needed. The filter function + expects an event object as input and should output either null, a + matching Node, or an array of matching Nodes. Otherwise, this acts + likeonDOM event subscriptions. Store subscription + related objects and information on thesubscription+ object. When the criteria have been met to fire the synthetic event, + callnotifier.fire(e)as noted above.
+
+ detachDelegate
+ function (node, subscription, notifier)The + implementation logic for cleaning up a detached delegate subscription. + E.g. detach any DOM delegate subscriptions added in +delegate.
+
+ publishConfig
+ - (Object) The configuration object that will be used to instantiate
+ the underlying CustomEvent. See Notifier's
firemethod + for details.
+
+ processArgs
+ subMatch
+ -
+
+function (sub, args)Compares a set of + subscription arguments against a Subscription object to determine + if they match. The default implementation compares the callback + function against the second argument passed to +Y.on(...)ornode.detach(...)etc.
+
function (argArray, fromDelegate) Optional method
+ to extract any additional arguments from the subscription
+ signature. Using this allows on or
+ delegate signatures like
+ node.on("hover", overCallback,
+ outCallback).
When processing an atypical argument signature, make sure the
+ args array is returned to the normal signature before returning
+ from the function. For example, in the "hover" example
+ above, the outCallback needs to be spliced
+ out of the array. The expected signature of the args array for
+ on() subscriptions is:
+ [type, callback, target, contextOverride, argN...]
+
+ And for delegate():
+ [type, callback, target, filter, contextOverride, argN...]
+
+ where target is the node the event is being
+ subscribed for. You can see these signatures documented for
+ Y.on() and Y.delegate() respectively.
Whatever gets returned from the function will be stored on the
+ subscription object under
+ subscription._extra.
Parameters:
+ + +Returns:
+ +defineOutside
+
+
+ -
+
+
-
+
+
event+ +
+
+ -
+
+
name+ +
+
+
Defines a new outside event to correspond with the given DOM event.
+ +By default, the created synthetic event name will be the name of the event
+with "outside" appended (e.g. "click" becomes "clickoutside"). If you want
+a different name for the created Event, pass it as a second argument like so:
+Y.Event.defineOutside(eventType, "yonderclick").
delegate
+
+
+ -
+
+
-
+
+
type+ +
+
+ -
+
+
fn+ +
+
+ -
+
+
el+ +
+
+ -
+
+
filter+ +
+
+ -
+
+
context+ +
+
+ -
+
+
args+ +
+
+
Sets up event delegation on a container element. The delegated event +will use a supplied selector or filtering function to test if the event +references at least one node that should trigger the subscription +callback.
+ +Selector string filters will trigger the callback if the event originated +from a node that matches it or is contained in a node that matches it. +Function filters are called for each Node up the parent axis to the +subscribing container node, and receive at each level the Node and the event +object. The function should return true (or a truthy value) if that Node +should trigger the subscription callback. Note, it is possible for filters +to match multiple Nodes for a single event. In this case, the delegate +callback will be executed for each matching Node.
+ +For each matching Node, the callback will be executed with its 'this'
+object set to the Node matched by the filter (unless a specific context was
+provided during subscription), and the provided event's
+currentTarget will also be set to the matching Node. The
+containing Node from which the subscription was originally made can be
+referenced as e.container.
Parameters:
+ +-
+
+
-
+
+
type+ String + + + + +++ + +the event type to delegate
+
+
+ -
+
+
fn+ Function + + + + +++ + +the callback function to execute. This function + will be provided the event object for the delegated event.
+
+
+ -
+
+
el+ String | Node + + + + +++ + +the element that is the delegation container
+
+
+ -
+
+
filter+ String | Function + + + + +++ + +a selector that must match the target of the + event or a function to test target and its parents for a match
+
+
+ -
+
+
context+ Object + + + + +++ + +optional argument that specifies what 'this' refers to.
+
+
+ -
+
+
args+ Object + + + + multiple + + +++ + +0..n additional arguments to pass on to the callback function. + These arguments will be added after the event object.
+
+
+
Returns:
+ +delegate
+
+
+ -
+
+
-
+
+
node+ +
+
+ -
+
+
subscription+ +
+
+ -
+
+
notifier+ +
+
+ -
+
+
filter+ +
+
+
Event delegation for the 'tap' event. The delegated event will use a +supplied selector or filtering function to test if the event references at least one +node that should trigger the subscription callback.
+ +Usage:
+ +node.delegate('tap', function (e) {
+ Y.log('li a inside node was tapped.');
+}, 'li a');
+detach
+
+
+ -
+
+
-
+
+
type+ +
+
+ -
+
+
fn+ +
+
+ -
+
+
el+ +
+
+
Removes an event listener. Supports the signature the event was bound +with, but the preferred way to remove listeners is using the handle +that is returned when using Y.on
+Parameters:
+ +-
+
+
-
+
+
type+ String + + + + +++ + +the type of event to remove.
+
+
+ -
+
+
fn+ Function + + + + +++ + +the method the event invokes. If fn is +undefined, then all event handlers for the type of event are +removed.
+
+
+ -
+
+
el+ String | HTMLElement | Array | NodeList | EventHandle + + + + +++ + +An +event handle, an id, an element reference, or a collection +of ids and/or elements to remove the listener from.
+
+
+
Returns:
+ +detach
+
+
+ -
+
+
-
+
+
node+ +
+
+ -
+
+
subscription+ +
+
+ -
+
+
notifier+ +
+
+
Detaches all event subscriptions set up by the event-tap module
+detachDelegate
+
+
+ -
+
+
-
+
+
node+ +
+
+ -
+
+
subscription+ +
+
+ -
+
+
notifier+ +
+
+
Detaches the delegated event subscriptions set up by the event-tap module. +Only used if you use node.delegate(...) instead of node.on(...);
+flick
+
+
+ -
+
+
-
+
+
cb+ +
+
+ -
+
+
point+ +
+
+ -
+
+
axis+ +
+
+ -
+
+
distance+ +
+
+ -
+
+
duration+ +
+
+
The "flick" gesture is a specialized "move" that has some velocity +and the movement always runs either x or y axis. The velocity is calculated +with "distance" and "duration" arguments. If the calculated velocity is +below than the minimum velocity, the given duration will be ignored and +new duration will be created to make a valid flick gesture.
+Parameters:
+ +-
+
+
-
+
+
cb+ Function + + + + +++ + +The callback to execute when the gesture simulation + is completed.
+
+
+ -
+
+
point+ Array + + + + +++ + +A point(relative to the top left corner of the + target node element) where the flick gesture should start. The default + is the center of the taget node.
+
+
+ -
+
+
axis+ String + + + + +++ + +Either "x" or "y".
+
+
+ -
+
+
distance+ Number + + + + +++ + +A distance in pixels to flick.
+
+
+ -
+
+
duration+ Number + + + + +++ + +A duration of the gesture in millisecond.
+
+
+
generateId
+
+
+ -
+
+
-
+
+
el+ +
+
+
Generates an unique ID for the element if it does not already +have one.
+Parameters:
+ +-
+
+
-
+
+
el+ Object + + + + +++ + +the element to create the id for
+
+
+
Returns:
+ +getEvent
+
+
+ -
+
+
-
+
+
e+ +
+
+ -
+
+
el+ +
+
+
Finds the event in the window object, the caller's arguments, or +in the arguments of another method in the callstack. This is +executed automatically for events registered through the event +manager, so the implementer should not normally need to execute +this function at all.
+Parameters:
+ +-
+
+
-
+
+
e+ Event + + + + +++ + +the event parameter from the handler
+
+
+ -
+
+
el+ HTMLElement + + + + +++ + +the element the listener was attached to
+
+
+
Returns:
+ +getListeners
+
+
+ -
+
+
-
+
+
el+ +
+
+ -
+
+
type+ +
+
+
Returns all listeners attached to the given element via addListener. +Optionally, you can specify a specific type of event to return.
+Parameters:
+ +-
+
+
-
+
+
el+ HTMLElement | String + + + + +++ + +the element or element id to inspect
+
+
+ -
+
+
type+ String + + + + +++ + +optional type of listener to return. If +left out, all listeners will be returned
+
+
+
Returns:
+ +move
+
+
+ -
+
+
-
+
+
cb+ +
+
+ -
+
+
path+ +
+
+ -
+
+
duration+ +
+
+
The "move" gesture simulate the movement of any direction between +the straight line of start and end point for the given duration. +The path argument is an object with "point", "xdist" and "ydist" properties. +The "point" property is an array with x and y coordinations(relative to the +top left corner of the target node element) while "xdist" and "ydist" +properties are used for the distance along the x and y axis. A negative +distance number can be used to drag either left or up direction.
+ +If no arguments are given, it will simulate the default move, which +is moving 200 pixels from the center of the element to the positive X-axis +direction for 1 sec.
+Parameters:
+ + +nativeAdd
+
+
+ -
+
+
-
+
+
el+ +
+
+ -
+
+
type+ +
+
+ -
+
+
fn+ +
+
+ -
+
+
capture+ +
+
+
Adds a DOM event directly without the caching, cleanup, context adj, etc
+Parameters:
+ +-
+
+
-
+
+
el+ HTMLElement + + + + +++ + +the element to bind the handler to
+
+
+ -
+
+
type+ String + + + + +++ + +the type of event handler
+
+
+ -
+
+
fn+ Function + + + + +++ + +the callback to invoke
+
+
+ -
+
+
capture+ Boolen + + + + +++ + +capture or bubble phase
+
+
+
nativeRemove
+
+
+ -
+
+
-
+
+
el+ +
+
+ -
+
+
type+ +
+
+ -
+
+
fn+ +
+
+ -
+
+
capture+ +
+
+
Basic remove listener
+Parameters:
+ +-
+
+
-
+
+
el+ HTMLElement + + + + +++ + +the element to bind the handler to
+
+
+ -
+
+
type+ String + + + + +++ + +the type of event handler
+
+
+ -
+
+
fn+ Function + + + + +++ + +the callback to invoke
+
+
+ -
+
+
capture+ Boolen + + + + +++ + +capture or bubble phase
+
+
+
notifySub
+
+
+ -
+
+
-
+
+
thisObj+ +
+
+ -
+
+
args+ +
+
+ -
+
+
ce+ +
+
+
Overrides the _notify method on the normal DOM subscription to
+inject the filtering logic and only proceed in the case of a match.
This method is hosted as a private property of the delegate method
+(e.g. Y.delegate.notifySub)
Parameters:
+ +-
+
+
-
+
+
thisObj+ Object + + + + +++ + +default 'this' object for the callback
+
+
+ -
+
+
args+ Array + + + + +++ + +arguments passed to the event's
+fire()
+
+ -
+
+
ce+ CustomEvent + + + + +++ + +the custom event managing the DOM subscriptions for + the subscribed event on the subscribing node.
+
+
+
Returns:
+ +on
+
+
+ -
+
+
-
+
+
node+ +
+
+ -
+
+
subscription+ +
+
+ -
+
+
notifier+ +
+
+
This function should set up the node that will eventually fire the event.
+ +Usage:
+ +node.on('tap', function (e) {
+ Y.log('the node was tapped on');
+});
+onAvailable
+
+
+ -
+
+
-
+
+
id+ +
+
+ -
+
+
fn+ +
+
+ -
+
+
p_obj+ +
+
+ -
+
+
p_override+ +
+
+ -
+
+
checkContent+ +
+
+
Executes the supplied callback when the item with the supplied +id is found. This is meant to be used to execute behavior as +soon as possible as the page loads. If you use this after the +initial page load it will poll for a fixed time for the element. +The number of times it will poll and the frequency are +configurable. By default it will poll for 10 seconds.
+ +The callback is executed with a single parameter: +the custom object parameter, if provided.
+Parameters:
+ +-
+
+
-
+
+
id+ String | | String[] + + + + +++ + +the id of the element, or an array +of ids to look for.
+
+
+ -
+
+
fn+ Function + + + + +++ + +what to execute when the element is found.
+
+
+ -
+
+
p_obj+ Object + + + + +++ + +an optional object to be passed back as + a parameter to fn.
+
+
+ -
+
+
p_override+ Boolean | Object + + + + +++ + +If set to true, fn will execute + in the context of p_obj, if set to an object it + will execute in the context of that object
+
+
+ -
+
+
checkContent+ Boolean + + + + +++ + +check child node readiness (onContentReady)
+
+
+
onContentReady
+
+
+ -
+
+
-
+
+
id+ +
+
+ -
+
+
fn+ +
+
+ -
+
+
obj+ +
+
+ -
+
+
override+ +
+
+
Works the same way as onAvailable, but additionally checks the +state of sibling elements to determine if the content of the +available element is safe to modify.
+ +The callback is executed with a single parameter: +the custom object parameter, if provided.
+Parameters:
+ +-
+
+
-
+
+
id+ String + + + + +++ + +the id of the element to look for.
+
+
+ -
+
+
fn+ Function + + + + +++ + +what to execute when the element is ready.
+
+
+ -
+
+
obj+ Object + + + + +++ + +an optional object to be passed back as + a parameter to fn.
+
+
+ -
+
+
override+ Boolean | Object + + + + +++ + +If set to true, fn will execute + in the context of p_obj. If an object, fn will + exectute in the context of that object
+
+
+
pinch
+
+
+ -
+
+
-
+
+
cb+ +
+
+ -
+
+
center+ +
+
+ -
+
+
startRadius+ +
+
+ -
+
+
endRadius+ +
+
+ -
+
+
duration+ +
+
+ -
+
+
start+ +
+
+ -
+
+
rotation+ +
+
+
The "rotate" and "pinch" methods are essencially same with the exact same +arguments. Only difference is the required parameters. The rotate method +requires "rotation" parameter while the pinch method requires "startRadius" +and "endRadius" parameters.
+ +The "pinch" gesture can simulate various 2 finger gestures such as pinch, +spread and/or rotation. The "startRadius" and "endRadius" are required. +If endRadius is larger than startRadius, it becomes a spread gesture +otherwise a pinch gesture.
+Parameters:
+ +-
+
+
-
+
+
cb+ Function + + + + +++ + +The callback to execute when the gesture simulation + is completed.
+
+
+ -
+
+
center+ Array + + + + +++ + +A center point where the pinch gesture of two fingers + should happen. It is relative to the top left corner of the target + node element.
+
+
+ -
+
+
startRadius+ Number + + + + +++ + +A radius of start circle where 2 fingers are + on when the gesture starts. This paramenter is required.
+
+
+ -
+
+
endRadius+ Number + + + + +++ + +A radius of end circle where 2 fingers will be on when + the pinch or spread gestures are completed. This parameter is required.
+
+
+ -
+
+
duration+ Number + + + + +++ + +A duration of the gesture in millisecond.
+
+
+ -
+
+
start+ Number + + + + +++ + +A start angle(0 degree at 12 o'clock) where the + gesture should start. Default is 0.
+
+
+ -
+
+
rotation+ Number + + + + +++ + +If rotation is desired during the pinch or + spread gestures, this parameter can be used. Default is 0 degree.
+
+
+
purgeElement
+
+
+ -
+
+
-
+
+
el+ +
+
+ -
+
+
recurse+ +
+
+ -
+
+
type+ +
+
+
Removes all listeners attached to the given element via addListener. +Optionally, the node's children can also be purged. +Optionally, you can specify a specific type of event to remove.
+Parameters:
+ +-
+
+
-
+
+
el+ HTMLElement + + + + +++ + +the element to purge
+
+
+ -
+
+
recurse+ Boolean + + + + +++ + +recursively purge this element's children +as well. Use with caution.
+
+
+ -
+
+
type+ String + + + + +++ + +optional type of listener to purge. If +left out, all listeners will be removed
+
+
+
rotate
+
+
+ -
+
+
-
+
+
cb+ +
+
+ -
+
+
center+ +
+
+ -
+
+
startRadius+ +
+
+ -
+
+
endRadius+ +
+
+ -
+
+
duration+ +
+
+ -
+
+
start+ +
+
+ -
+
+
rotation+ +
+
+
The "rotate" and "pinch" methods are essencially same with the exact same +arguments. Only difference is the required parameters. The rotate method +requires "rotation" parameter while the pinch method requires "startRadius" +and "endRadius" parameters.
+Parameters:
+ +-
+
+
-
+
+
cb+ Function + + + + +++ + +The callback to execute when the gesture simulation + is completed.
+
+
+ -
+
+
center+ Array + + + + +++ + +A center point where the pinch gesture of two fingers + should happen. It is relative to the top left corner of the target + node element.
+
+
+ -
+
+
startRadius+ Number + + + + +++ + +A radius of start circle where 2 fingers are + on when the gesture starts. This is optional. The default is a fourth of + either target node width or height whichever is smaller.
+
+
+ -
+
+
endRadius+ Number + + + + +++ + +A radius of end circle where 2 fingers will be on when + the pinch or spread gestures are completed. This is optional. + The default is a fourth of either target node width or height whichever is less.
+
+
+ -
+
+
duration+ Number + + + + +++ + +A duration of the gesture in millisecond.
+
+
+ -
+
+
start+ Number + + + + +++ + +A start angle(0 degree at 12 o'clock) where the + gesture should start. Default is 0.
+
+
+ -
+
+
rotation+ Number + + + + +++ + +A rotation in degree. It is required.
+
+
+
simulate
+
+
+ -
+
+
-
+
+
target+ +
+
+ -
+
+
type+ +
+
+ -
+
+
options+ +
+
+
Simulates the event or gesture with the given name on a target.
+Parameters:
+ +-
+
+
-
+
+
target+ HTMLElement + + + + +++ + +The DOM element that's the target of the event.
+
+
+ -
+
+
type+ String + + + + +++ + +The type of event or name of the supported gesture to simulate + (i.e., "click", "doubletap", "flick").
+
+
+ -
+
+
options+ Object + + + + +++ + +(Optional) Extra options to copy onto the event object. + For gestures, options are used to refine the gesture behavior.
+
+
+
Returns:
+ +simulateGesture
+
+
+ -
+
+
-
+
+
node+ +
+
+ -
+
+
name+ +
+
+ -
+
+
[options]+ +
+
+ -
+
+
[cb]+ +
+
+
Simulates the higher user level gesture of the given name on a target.
+This method generates a set of low level touch events(Apple specific gesture
+events as well for the iOS platforms) asynchronously. Note that gesture
+simulation is relying on Y.Event.simulate() method to generate
+the touch events under the hood. The Y.Event.simulate() method
+itself is a synchronous method.
Users are suggested to use Node.simulateGesture() method which
+basically calls this method internally. Supported gestures are tap,
+doubletap, press, move, flick, pinch and rotate.
The pinch gesture is used to simulate the pinching and spreading of two
+fingers. During a pinch simulation, rotation is also possible. Essentially
+pinch and rotate simulations share the same base implementation to allow
+both pinching and rotation at the same time. The only difference is pinch
+requires start and end option properties while rotate requires rotation
+option property.
The pinch and rotate gestures can be described as placing 2 fingers along a
+circle. Pinching and spreading can be described by start and end circles while
+rotation occurs on a single circle. If the radius of the start circle is greater
+than the end circle, the gesture becomes a pinch, otherwise it is a spread spread.
Parameters:
+ +-
+
+
-
+
+
node+ HTMLElement | Node + + + + +++ + +The YUI node or HTML element that's the target + of the event.
+
+
+ -
+
+
name+ String + + + + +++ + +The name of the supported gesture to simulate. The + supported gesture name is one of "tap", "doubletap", "press", "move", + "flick", "pinch" and "rotate".
+
+
+ -
+
+
[options]+ Object + optional + + + + +++ + +Extra options used to define the gesture behavior:
+ +
+Valid options properties for thetapgesture: +-
+
+
-
+
+
[point]+ Array + optional + + +++ + +(Optional) Indicates the [x,y] coordinates + where the tap should be simulated. Default is the center of the node + element.
+
+
+ -
+
+
[hold=10]+ Number + optional + + +++ + +(Optional) The hold time in milliseconds. + This is the time between
+touchstartandtouchendevent generation.
+
+ -
+
+
[times=1]+ Number + optional + + +++ + +(Optional) Indicates the number of taps.
+
+
+ -
+
+
[delay=10]+ Number + optional + + +++ + +(Optional) The number of milliseconds + before the next tap simulation happens. This is valid only when
+ +times+ is more than 1.
+Valid options properties for thedoubletapgesture: +
+
+ -
+
+
[point]+ Array + optional + + +++ + +(Optional) Indicates the [x,y] coordinates + where the doubletap should be simulated. Default is the center of the + node element.
+ +
+Valid options properties for thepressgesture: +
+
+ -
+
+
[point]+ Array + optional + + +++ + +(Optional) Indicates the [x,y] coordinates + where the press should be simulated. Default is the center of the node + element.
+
+
+ -
+
+
[hold=3000]+ Number + optional + + +++ + +(Optional) The hold time in milliseconds. + This is the time between
+ +touchstartandtouchendevent generation. + Default is 3000ms (3 seconds).
+Valid options properties for themovegesture: +
+
+ -
+
+
[path]+ Object + optional + + +++ + +(Optional) Indicates the path of the finger + movement. It's an object with three optional properties:
+point, +xdistandydist.-
+
+
-
+
+
[point]+ Array + optional + + ++ A starting point of the gesture. + Default is the center of the node element. ++
+
+ -
+
+
[xdist=200]+ Number + optional + + ++ A distance to move in pixels + along the X axis. A negative distance value indicates moving left. ++
+
+ -
+
+
[ydist=0]+ Number + optional + + ++ A distance to move in pixels + along the Y axis. A negative distance value indicates moving up. ++
+
+
+
+ -
+
+
-
+
+
[duration=1000]+ Number + optional + + +++ + +(Optional) The duration of the + gesture in milliseconds.
+ +
+Valid options properties for theflickgesture: +
+
+ -
+
+
[point]+ Array + optional + + +++ + +(Optional) Indicates the [x, y] coordinates + where the flick should be simulated. Default is the center of the + node element.
+
+
+ -
+
+
[axis='x']+ String + optional + + +++ + +(Optional) Valid values are either + "x" or "y". Indicates axis to move along. The flick can move to one of + 4 directions(left, right, up and down).
+
+
+ -
+
+
[distance=200]+ Number + optional + + +++ + +(Optional) Distance to move in pixels
+
+
+ -
+
+
[duration=1000]+ Number + optional + + +++ + +(Optional) The duration of the + gesture in milliseconds. User given value could be automatically + adjusted by the framework if it is below the minimum velocity to be + a flick gesture.
+ +
+Valid options properties for thepinchgesture: +
+
+ -
+
+
[center]+ Array + optional + + +++ + +(Optional) The center of the circle where + two fingers are placed. Default is the center of the node element.
+
+
+ -
+
+
[r1]+ Number + optional + + +++ + +(Required) Pixel radius of the start circle + where 2 fingers will be on when the gesture starts. The circles are + centered at the center of the element.
+
+
+ -
+
+
[r2]+ Number + optional + + +++ + +(Required) Pixel radius of the end circle + when this gesture ends.
+
+
+ -
+
+
[duration=1000]+ Number + optional + + +++ + +(Optional) The duration of the + gesture in milliseconds.
+
+
+ -
+
+
[start=0]+ Number + optional + + +++ + +(Optional) Starting degree of the first + finger. The value is relative to the path of the north. Default is 0 + (i.e., 12:00 on a clock).
+
+
+ -
+
+
[rotation=0]+ Number + optional + + +++ + +(Optional) Degrees to rotate from + the starting degree. A negative value means rotation to the + counter-clockwise direction.
+ +
+Valid options properties for therotategesture: +
+
+ -
+
+
[center]+ Array + optional + + +++ + +(Optional) The center of the circle where + two fingers are placed. Default is the center of the node element.
+
+
+ -
+
+
[r1]+ Number + optional + + +++ + +(Optional) Pixel radius of the start circle + where 2 fingers will be on when the gesture starts. The circles are + centered at the center of the element. Default is a fourth of the node + element width or height, whichever is smaller.
+
+
+ -
+
+
[r2]+ Number + optional + + +++ + +(Optional) Pixel radius of the end circle + when this gesture ends. Default is a fourth of the node element width or + height, whichever is smaller.
+
+
+ -
+
+
[duration=1000]+ Number + optional + + +++ + +(Optional) The duration of the + gesture in milliseconds.
+
+
+ -
+
+
[start=0]+ Number + optional + + +++ + +(Optional) Starting degree of the first + finger. The value is relative to the path of the north. Default is 0 + (i.e., 12:00 on a clock).
+
+
+ -
+
+
[rotation]+ Number + optional + + +++ + +(Required) Degrees to rotate from + the starting degree. A negative value means rotation to the + counter-clockwise direction.
+
+
+
+
+ -
+
+
-
+
+
[cb]+ Function + optional + + + + +++ + +The callback to execute when the asynchronouse gesture
+
+ simulation is completed.-
+
+
-
+
+
err+ Error + + +++ + +An error object if the simulation is failed.
+
+
+
+
+ -
+
+
Returns:
+ +Example:
+ +var node = Y.one("#target");
+
+// double tap example
+node.simulateGesture("doubletap", function() {
+ // my callback function
+});
+
+// flick example from the center of the node, move 50 pixels down for 50ms)
+node.simulateGesture("flick", {
+ axis: y,
+ distance: -100
+ duration: 50
+}, function() {
+ // my callback function
+});
+
+// simulate rotating a node 75 degrees counter-clockwise
+node.simulateGesture("rotate", {
+ rotation: -75
+});
+
+// simulate a pinch and a rotation at the same time.
+// fingers start on a circle of radius 100 px, placed at top/bottom
+// fingers end on a circle of radius 50px, placed at right/left
+node.simulateGesture("pinch", {
+ r1: 100,
+ r2: 50,
+ start: 0
+ rotation: 90
+});
+startInterval
+
+
+ ()
+
+
+
+
+
+
+
+ private
+
+
+
+
+
+ static
+
+
+
+
+
+
+
+
+ tap
+
+
+ -
+
+
-
+
+
cb+ +
+
+ -
+
+
point+ +
+
+ -
+
+
times+ +
+
+ -
+
+
hold+ +
+
+ -
+
+
delay+ +
+
+
The "tap" gesture can be used for various single touch point gestures +such as single tap, N number of taps, long press. The default is a single +tap.
+Parameters:
+ +-
+
+
-
+
+
cb+ Function + + + + +++ + +The callback to execute when the gesture simulation + is completed.
+
+
+ -
+
+
point+ Array + + + + +++ + +A point(relative to the top left corner of the + target node element) where the tap gesture should start. The default + is the center of the taget node.
+
+
+ -
+
+
times+ Number + + + + +++ + +The number of taps. Default is 1.
+
+
+ -
+
+
hold+ Number + + + + +++ + +The hold time in milliseconds between "touchstart" and + "touchend" event generation. Default is 10ms.
+
+
+ -
+
+
delay+ Number + + + + +++ + +The time gap in millisecond between taps if this + gesture has more than 1 tap. Default is 10ms.
+
+
+
touchEnd
+
+
+ -
+
+
-
+
+
event+ +
+
+ -
+
+
node+ +
+
+ -
+
+
subscription+ +
+
+ -
+
+
notifier+ +
+
+ -
+
+
delegate+ +
+
+ -
+
+
context+ +
+
+
Called when the monitor(s) fires a touchend event (or the mouse equivalent). +This method fires the 'tap' event if certain requirements are met.
+Parameters:
+ +-
+
+
-
+
+
event+ DOMEventFacade + + + + ++ ++ + +
+
+ -
+
+
node+ Y.Node + + + + ++ ++ + +
+
+ -
+
+
subscription+ Array + + + + ++ ++ + +
+
+ -
+
+
notifier+ Boolean + + + + ++ ++ + +
+
+ -
+
+
delegate+ Boolean + + + + ++ ++ + +
+
+ -
+
+
context+ Object + + + + ++ ++ + +
+
+
touchMove
+
+
+ -
+
+
-
+
+
event+ +
+
+ -
+
+
node+ +
+
+ -
+
+
subscription+ +
+
+ -
+
+
notifier+ +
+
+ -
+
+
delegate+ +
+
+ -
+
+
context+ +
+
+
Called when the monitor(s) fires a touchmove or touchcancel event (or the mouse equivalent). +This method detaches event handlers so that 'tap' is not fired.
+Parameters:
+ +-
+
+
-
+
+
event+ DOMEventFacade + + + + ++ ++ + +
+
+ -
+
+
node+ Y.Node + + + + ++ ++ + +
+
+ -
+
+
subscription+ Array + + + + ++ ++ + +
+
+ -
+
+
notifier+ Boolean + + + + ++ ++ + +
+
+ -
+
+
delegate+ Boolean + + + + ++ ++ + +
+
+ -
+
+
context+ Object + + + + ++ ++ + +
+
+
touchStart
+
+
+ -
+
+
-
+
+
event+ +
+
+ -
+
+
node+ +
+
+ -
+
+
subscription+ +
+
+ -
+
+
notifier+ +
+
+ -
+
+
delegate+ +
+
+
Called when the monitor(s) are tapped on, either through touchstart or mousedown.
+Parameters:
+ +-
+
+
-
+
+
event+ DOMEventFacade + + + + ++ ++ + +
+
+ -
+
+
node+ Y.Node + + + + ++ ++ + +
+
+ -
+
+
subscription+ Array + + + + ++ ++ + +
+
+ -
+
+
notifier+ Boolean + + + + ++ ++ + +
+
+ -
+
+
delegate+ Boolean + + + + ++ ++ + +
+
+
Properties
+ + +_avail
+ Unknown
+
+
+
+
+ private
+
+
+
+
+
+ static
+
+
+
+
+ onAvailable listeners
+_disabledRE
+ RegExp
+
+
+
+
+ protected
+
+
+
+
+
+
+
+
+ Regex to test for disabled elements during filtering. This is only relevant to
+IE to normalize behavior with other browsers, which swallow events that occur
+to disabled elements. IE fires the event from the parent element instead of the
+original target, though it does preserve event.srcElement as the disabled
+element. IE also supports disabled on <a>, but the event still bubbles, so it
+acts more like e.preventDefault() plus styling. That issue is not handled here
+because other browsers fire the event on the <a>, so delegate is supported in
+both cases.
_dri
+ Unknown
+
+
+
+
+ private
+
+
+
+
+
+ static
+
+
+
+
+ document readystate poll handle
+_el_events
+ Unknown
+
+
+
+
+ private
+
+
+
+
+
+ static
+
+
+
+
+ Custom event wrapper map DOM events. Key is +Element uid stamp. Each item is a hash of custom event +wrappers as provided in the _wrappers collection. This +provides the infrastructure for getListeners.
+_interval
+ Unknown
+
+
+
+
+ private
+
+
+
+
+
+ static
+
+
+
+
+ poll handle
+_loadComplete
+ Boolean
+
+
+
+
+ private
+
+
+
+
+
+ static
+
+
+
+
+ True after the onload event has fired
+_retryCount
+ Unknown
+
+
+
+
+ private
+
+
+
+
+
+ static
+
+
+
+
+ The number of times to poll after window.onload. This number is +increased if additional late-bound handlers are requested after +the page load.
+_wrappers
+ Y.Event.Custom
+
+
+
+
+ private
+
+
+
+
+
+ static
+
+
+
+
+ Custom event wrappers for DOM events. Key is +'event:' + Element uid stamp + event type
+DOMReady
+ Boolean
+
+
+
+
+
+
+
+
+ static
+
+
+
+
+ True when the document is initially usable
+lastError
+ Error
+
+
+
+
+
+
+
+
+ static
+
+
+
+
+ addListener/removeListener can throw errors in unexpected scenarios. +These errors are suppressed, the method returns false, and this property +is set
+POLL_INTERVAL
+ Int
+
+
+
+
+
+
+ final
+
+
+
+ static
+
+
+
+
+ The poll interval in milliseconds
+POLL_RETRYS
+ Int
+
+
+
+
+
+
+ final
+
+
+
+ static
+
+
+
+
+ The number of times we should look for elements that are not +in the DOM at the time the event is requested after the document +has been loaded. The default is 1000@amp;40 ms, so it will poll +for 40 seconds or until all outstanding handlers are bound +(whichever comes first).
+Events
+ + +tap
+
+
+
+
+
+
+
+
+
+
+
+
+ Sets up a "tap" event, that is fired on touch devices in response to a tap event (finger down, finder up). +This event can be used instead of listening for click events which have a 500ms delay on most touch devices. +This event can also be listened for using node.delegate().
+