# Yahoo! UI Library

### yui 3.1.1

Yahoo! UI Library > yui > YUI
Search:
Filters Show Private Show Protected Show Deprecated

## Class YUI - uses EventTarget

The YUI global namespace object. If YUI is already defined, the existing YUI object will not be overwritten so that defined namespaces are preserved. It is the constructor for the object the end user interacts with. As indicated below, each instance has full custom event support, but only if the event system is available.

### Constructor

YUI `( o* )`

Parameters:
  `o* <object>` 0..n optional configuration objects. these values are store in Y.config. See config for the list of supported properties.

### Properties

#### Global - `EventTarget`

Hosts YUI page level events. This is where events bubble to when the broadcast config is set to 2. This property is only available if the custom event module is loaded.

### Methods

#### _attach

`private void _attach ( )`
Executes the function associated with each required module, binding the module to the YUI instance.

#### _init

`private void _init ( )`
Initialize this YUI instance

#### _setup

`private void _setup ( )`
Finishes the instance setup. Attaches whatever modules were defined when the yui modules was registered.

#### add

`YUI add ( name , fn , version , details )`
Registers a module with the YUI global. The easiest way to create a first-class YUI module is to use the YUI component build tool. http://yuilibrary.com/projects/builder The build system will produce the YUI.add wrapper for you module, along with any configuration info required for the module.

Parameters:
  `name <string>` module name
  `fn <Function>` entry point into the module that is used to bind module to the YUI instance
  `version <string>` version string
  `details <object>` optional config data: requires: features that must be present before this module can be attached. optional: optional features that should be present if loadOptional is defined. Note: modules are not often loaded this way in YUI 3, but this field is still useful to inform the user that certain features in the component will require additional dependencies. use: features that are included within this module which need to be be attached automatically when this module is attached. This supports the YUI 3 rollup system -- a module with submodules defined will need to have the submodules listed in the 'use' config. The YUI component build tool does this for you.

Returns: `YUI`
  the YUI instance

#### addClass

`void addClass ( element , className )`
Adds a class name to a given DOM element.

Parameters:
  `element <HTMLElement>` The DOM element.
  `className <String>` the class name to add to the class attribute

#### after

`after ( type , fn , target , extra , context , args* )`
after() is a unified interface for subscribing to most events exposed by YUI. This includes custom events, DOM events, and AOP events. This works the same way as the on() function, only it operates after any default behavior for the event has executed. @see `on` for more information.

Parameters:
  `type <object>` event type (this parameter does not apply for function events)
  `fn <object>` the callback
  `target <object>` a descriptor for the target (applies to custom events only). For function events, this is the object that contains the function to execute.
  `extra <object>` 0..n Extra information a particular event may need. These will be documented with the event. In the case of function events, this is the name of the function to execute on the host. In the case of delegate listeners, this is the event delegation specification.
  `context <object>` optionally change the value of 'this' in the callback
  `args* <object>` 0..n additional arguments to pass to the callback.

Returns: ``
  the event target or a detach handle per 'chain' config

#### applyTo

`object applyTo ( id , method , args )`
Executes a method on a YUI instance with the specified id if the specified method is whitelisted.

Parameters:
  `id <string>` the YUI instance id
  `method <string>` the name of the method to exectute. Ex: 'Object.keys'
  `args <Array>` the arguments to apply to the method

Returns: `object`
  the return value from the applied method or null

#### cached

`Function cached ( source , cache , refetch )`
Returns a wrapper for a function which caches the return value of that function, keyed off of the combined argument values.

Parameters:
  `source <function>` the function to memoize
  `cache <object>` an optional cache seed
  `refetch <object>` if supplied, this value is tested against the cached value. If the values are equal, the wrapped function is executed again.

Returns: `Function`
  the wrapped function

#### delegate

`EventHandle delegate ( type , fn , el , spec , context , args* )`
Sets up event delegation on a container element. The delegated event will use a supplied selector to test if the target or one of the descendants of the target match it. The supplied callback function will only be executed if a match was encountered, and, in fact, will be executed for each element that matches if you supply an ambiguous selector. The event object for the delegated event is supplied to the callback function. It is modified slightly in order to support all properties that may be needed for event delegation. 'currentTarget' is set to the element that matched the delegation specifcation. 'container' is set to the element that the listener is bound to (this normally would be the 'currentTarget').

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
  `spec <string>` a selector that must match the target of the event.
  `context <object>` optional argument that specifies what 'this' refers to.
  `args* <object>` 0..n additional arguments to pass on to the callback function. These arguments will be added after the event object.

Returns: `EventHandle`
  the detach handle

#### error

`YUI error ( msg , e )`
Report an error. The reporting mechanism is controled by the 'throwFail' configuration attribute. If throwFail is not specified, the message is written to the Logger, otherwise a JS error is thrown

Parameters:
  `msg <string>` the error message
  `e <Error>` Optional JS error that was caught. If supplied and throwFail is specified, this error will be re-thrown.

Returns: `YUI`
  this YUI instance

#### guid

`string guid ( pre )`
Generate an id that is unique among all YUI instances

Parameters:
  `pre <string>` optional guid prefix

Returns: `string`
  the guid

#### hasClass

`Boolean hasClass ( element , className )`
Determines whether a DOM element has the given className.

Parameters:
  `element <HTMLElement>` The DOM element.
  `className <String>` the class name to search for

Returns: `Boolean`
  Whether or not the element has the given class.

#### inRegion

`Boolean inRegion ( all , altRegion )`
Check if any part of this node is in the passed region

Parameters:
  `all <Object} node2 The node to get the region from or an Object literal of the region $param {Boolean>` Should all of the node be inside the region
  `altRegion <Object>` An object literal containing the region for this node if we already have the data (for performance i.e. DragDrop)

Returns: `Boolean`
  True if in region, false if not.

#### intersect

`Object intersect ( element , element2 , altRegion )`
Find the intersect information for the passes nodes.

Parameters:
  `element <HTMLElement>` The first element
  `element2 <HTMLElement | Object>` The element or region to check the interect with
  `altRegion <Object>` An object literal containing the region for the first element if we already have the data (for performance i.e. DragDrop)

Returns: `Object`
  Object literal containing the following intersection data: (top, right, bottom, left, area, yoff, xoff, inRegion)

#### inViewportRegion

`Boolean inViewportRegion ( element , all , altRegion )`
Check if any part of this element is in the viewport

Parameters:
  `element <HTMLElement>` The DOM element.
  `all <Boolean>` Should all of the node be inside the region
  `altRegion <Object>` An object literal containing the region for this node if we already have the data (for performance i.e. DragDrop)

Returns: `Boolean`
  True if in region, false if not.

#### later

`object later ( when , o , fn , data , periodic )`
Executes the supplied function in the context of the supplied object 'when' milliseconds later. Executes the function a single time unless periodic is set to true.

Parameters:
  `when <int>` the number of milliseconds to wait until the fn is executed.
  `o <object>` the context object.
  `fn <Function|String>` the function to execute or the name of the method in the 'o' object to execute.
  `data <object>` [Array] data that is provided to the function. This accepts either a single item or an array. If an array is provided, the function is executed with one parameter for each array item. If you need to pass a single array parameter, it needs to be wrapped in an array [myarray].
  `periodic <boolean>` if true, executes continuously at supplied interval until canceled.

Returns: `object`
  a timer object. Call the cancel() method on this object to stop the timer.

#### log

`YUI log ( msg , cat , src , silent )`
If the 'debug' config is true, a 'yui:log' event will be dispatched, which the Console widget and anything else can consume. If the 'useBrowserConsole' config is true, it will write to the browser console if available. YUI-specific log messages will only be present in the -debug versions of the JS files. The build system is supposed to remove log statements from the raw and minified versions of the files.

Parameters:
  `msg <String>` The message to log.
  `cat <String>` The log category for the message. Default categories are "info", "warn", "error", time". Custom categories can be used as well. (opt)
  `src <String>` The source of the the message (opt)
  `silent <boolean>` If true, the log event won't fire

Returns: `YUI`
  YUI instance

#### merge

`object merge ( arguments )`
Returns a new object containing all of the properties of all the supplied objects. The properties from later objects will overwrite those in earlier objects. Passing in a single object will create a shallow copy of it. For a deep copy, use clone.

Parameters:
  `arguments <Object*>` the objects to merge

Returns: `object`
  the new merged object

#### message

`YUI message ( msg , cat , src , silent )`
Write a system message. This message will be preserved in the minified and raw versions of the YUI files, unlike log statements.

Parameters:
  `msg <String>` The message to log.
  `cat <String>` The log category for the message. Default categories are "info", "warn", "error", time". Custom categories can be used as well. (opt)
  `src <String>` The source of the the message (opt)
  `silent <boolean>` If true, the log event won't fire

Returns: `YUI`
  YUI instance

#### mix

`object mix ( r , s , ov , wl , mode , merge )`
Applies the supplier's properties to the receiver. By default all prototype and static propertes on the supplier are applied to the corresponding spot on the receiver. By default all properties are applied, and a property that is already on the reciever will not be overwritten. The default behavior can be modified by supplying the appropriate parameters.

Parameters:
  `r <Function>` the object to receive the augmentation
  `s <Function>` the object that supplies the properties to augment
  `ov <boolean>` if true, properties already on the receiver will be overwritten if found on the supplier.
  `wl <string[]>` a whitelist. If supplied, only properties in this list will be applied to the receiver.
  `mode <int>` what should be copies, and to where default(0): object to object 1: prototype to prototype (old augment) 2: prototype to prototype and object props (new augment) 3: prototype to object 4: object to prototype
  `merge <boolean/int>` merge objects instead of overwriting/ignoring. A value of 2 will skip array merge Used by Y.aggregate

Returns: `object`
  the augmented object

#### namespace

`object namespace ( arguments )`
Returns the namespace specified and creates it if it doesn't exist

    YUI.namespace("property.package");
    YUI.namespace("YAHOO.property.package");

Either of the above would create YUI.property, then YUI.property.package (YAHOO is scrubbed out, this is to remain compatible with YUI2) Be careful when naming packages. Reserved words may work in some browsers and not others. For instance, the following will fail in Safari:

    YUI.namespace("really.long.nested.namespace");

This fails because "long" is a future reserved word in ECMAScript

Parameters:
  `arguments <string*>` 1-n namespaces to create

Returns: `object`
  A reference to the last namespace object created

#### on

`on ( type** , fn , target** , extra** , context , args* )`
`YUI`'s `on` method is a unified interface for subscribing to most events exposed by YUI. This includes custom events, DOM events, and function events. `detach` is also provided to remove listeners serviced by this function. The signature that `on` accepts varies depending on the type of event being consumed. Refer to the specific methods that will service a specific request for additional information about subscribing to that type of event.

- Custom events. These events are defined by various modules in the library. This type of event is delegated to `EventTarget`'s `on` method.
  - The type of the event
  - The callback to execute
  - An optional context object
  - 0..n additional arguments to supply the callback.
  Example: `Y.on('domready', function() { // start work });`
- DOM events. These are moments reported by the browser related to browser functionality and user interaction. This type of event is delegated to `Event`'s `attach` method.
  - The type of the event
  - The callback to execute
  - The specification for the Node(s) to attach the listener to. This can be a selector, collections, or Node/Element refereces.
  - An optional context object
  - 0..n additional arguments to supply the callback.
  Example: `Y.on('click', function(e) { // something was clicked }, '#someelement');`
- Function events. These events can be used to react before or after a function is executed. This type of event is delegated to `Event.Do`'s `before` method.
  - The callback to execute
  - The object that has the function that will be listened for.
  - The name of the function to listen for.
  - An optional context object
  - 0..n additional arguments to supply the callback.
  Example `Y.on(function(arg1, arg2, etc) { // obj.methodname was executed }, obj 'methodname');`

`on` corresponds to the moment before any default behavior of the event. `after` works the same way, but these listeners execute after the event's default behavior. `before` is an alias for `on`.

Parameters:
  `type** <object>` event type (this parameter does not apply for function events)
  `fn <object>` the callback
  `target** <object>` a descriptor for the target (applies to custom events only). For function events, this is the object that contains the function to execute.
  `extra** <object>` 0..n Extra information a particular event may need. These will be documented with the event. In the case of function events, this is the name of the function to execute on the host. In the case of delegate listeners, this is the event delegation specification.
  `context <object>` optionally change the value of 'this' in the callback
  `args* <object>` 0..n additional arguments to pass to the callback.

Returns: ``
  the event target or a detach handle per 'chain' config

#### once

`once ( type** , fn , target** , extra** , context , args* )`
Listen for an event one time. Equivalent to `on`, except that the listener is immediately detached when executed.

Parameters:
  `type** <object>` event type (this parameter does not apply for function events)
  `fn <object>` the callback
  `target** <object>` a descriptor for the target (applies to custom events only). For function events, this is the object that contains the function to execute.
  `extra** <object>` 0..n Extra information a particular event may need. These will be documented with the event. In the case of function events, this is the name of the function to execute on the host. In the case of delegate listeners, this is the event delegation specification.
  `context <object>` optionally change the value of 'this' in the callback
  `args* <object>` 0..n additional arguments to pass to the callback.

Returns: ``
  the event target or a detach handle per 'chain' config

#### region

`Object region ( element )`
Returns an Object literal containing the following about this element: (top, right, bottom, left)

Parameters:
  `element <HTMLElement>` The DOM element.

Returns: `Object`
  Object literal containing the following about this element: (top, right, bottom, left)

#### removeClass

`void removeClass ( element , className )`
Removes a class name from a given element.

Parameters:
  `element <HTMLElement>` The DOM element.
  `className <String>` the class name to remove from the class attribute

#### replaceClass

`void replaceClass ( element , oldClassName , newClassName )`
Replace a class with another class for a given element. If no oldClassName is present, the newClassName is simply added.

Parameters:
  `element <HTMLElement>` The DOM element
  `oldClassName <String>` the class name to be replaced
  `newClassName <String>` the class name that will be replacing the old class name

#### simulate

`static void simulate ( target , type , options )`
Simulates the event 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 to simulate (i.e., "click").
  `options <Object>` (Optional) Extra options to copy onto the event object.

#### stamp

`string stamp ( o , readOnly )`
Returns a guid associated with an object. If the object does not have one, a new one is created unless readOnly is specified.

Parameters:
  `o <object>` The object to stamp
  `readOnly <boolean>` if true, a valid guid will only be returned if the object has one assigned to it.

Returns: `string`
  The object's guid or null

#### throttle

`function throttle ( fn , ms )`
Throttles a call to a method based on the time between calls.

Parameters:
  `fn <function>` The function call to throttle.
  `ms <int>` The number of milliseconds to throttle the method call. Can set globally with Y.config.throttleTime or by call. Passing a -1 will disable the throttle. Defaults to 150

Returns: `function`
  Returns a wrapped function that calls fn throttled.

#### toggleClass

`void toggleClass ( element , className , addClass )`
If the className exists on the node it is removed, if it doesn't exist it is added.

Parameters:
  `element <HTMLElement>` The DOM element
  `className <String>` the class name to be toggled
  `addClass <Boolean>` optional boolean to indicate whether class should be added or removed regardless of current state

#### use

`YUI use ( modules* , *callback )`
Attaches one or more modules to the YUI instance. When this is executed, the requirements are analyzed, and one of several things can happen: - All requirements are available on the page -- The modules are attached to the instance. If supplied, the use callback is executed synchronously. - Modules are missing, the Get utility is not available OR the 'bootstrap' config is false -- A warning is issued about the missing modules and all available modules are attached. - Modules are missing, the Loader is not available but the Get utility is and boostrap is not false -- The loader is bootstrapped before doing the following.... - Modules are missing and the Loader is available -- The loader expands the dependency tree and fetches missing modules. When the loader is finshed the callback supplied to use is executed asynchronously.

Parameters:
  `modules* <string>` 1-n modules to bind (uses arguments array)
  `*callback <function>` callback function executed when the instance has the required functionality. If included, it must be the last parameter. `// loads and attaches drag and drop and its dependencies YUI().use('dd', function(Y) {}); // attaches all modules that are available on the page YUI().use('*', function(Y) {}); // intrinsic YUI gallery support (since 3.1.0) YUI().use('gallery-yql', function(Y) {}); // intrinsic YUI 2in3 support (since 3.1.0) YUI().use('yui2-datatable', function(Y) {});`

Returns: `YUI`
  the YUI instance

#### viewportRegion

`Object viewportRegion ( )`
Returns an Object literal containing the following about the visible region of viewport: (top, right, bottom, left)

Returns: `Object`
  Object literal containing the following about the visible region of the viewport: (top, right, bottom, left)

#### Methods inherited from EventTarget:

`_getType, _monitor, _parseType, addTarget, after, before, bubble, detach, detachAll, fire, getEvent, getTargets, on, once, publish, removeTarget, subscribe, unsubscribe, unsubscribeAll`

### Events

#### available

`available ( type , fn , el , context , args* )`
Executes the callback as soon as the specified element is detected in the DOM.

Parameters:
  `type <string>` 'available'
  `fn <function>` the callback function to execute.
  `el <string|HTMLElement|collection>` the element(s) to attach
  `context <object>` optional argument that specifies what 'this' refers to.
  `args* <object>` 0..n additional arguments to pass on to the callback function. These arguments will be added after the event object.

#### blur

`blur ( type , fn , o , context , args )`
Adds a DOM blur listener. Uses the focusout event in IE, DOMFocusOut for Opera and Webkit, and the capture phase for Gecko so that the event propagates in a way that enables event delegation.

Parameters:
  `type <string>` 'blur'
  `fn <function>` the callback function to execute
  `o <string|HTMLElement|collection>` the element(s) to bind
  `context <object>` optional context object
  `args <object>` 0..n additional arguments to provide to the listener.

#### contentready

`contentready ( type , fn , el , context , args* )`
Executes the callback as soon as the specified element is detected in the DOM with a nextSibling property (indicating that the element's children are available)

Parameters:
  `type <string>` 'contentready'
  `fn <function>` the callback function to execute.
  `el <string|HTMLElement|collection>` the element(s) to attach
  `context <object>` optional argument that specifies what 'this' refers to.
  `args* <object>` 0..n additional arguments to pass on to the callback function. These arguments will be added after the event object.

#### domready

`domready ( )`
The domready event fires at the moment the browser's DOM is usable. In most cases, this is before images are fully downloaded, allowing you to provide a more responsive user interface. In YUI 3, domready subscribers will be notified immediately if that moment has already passed when the subscription is created. One exception is if the yui.js file is dynamically injected into the page. If this is done, you must tell the YUI instance that you did this in order for DOMReady (and window load events) to fire normally. That configuration option is 'injected' -- set it to true if the yui.js script is not included inline. This method is part of the 'event-ready' module, which is a submodule of 'event'.

#### focus

`focus ( type , fn , o , context , args )`
Adds a DOM focus listener. Uses the focusin event in IE, DOMFocusIn for Opera and Webkit, and the capture phase for Gecko so that the event propagates in a way that enables event delegation.

Parameters:
  `type <string>` 'focus'
  `fn <function>` the callback function to execute
  `o <string|HTMLElement|collection>` the element(s) to bind
  `context <object>` optional context object
  `args <object>` 0..n additional arguments to provide to the listener.

#### key

`key ( type , fn , id , spec , o , args )`
Add a key listener. The listener will only be notified if the keystroke detected meets the supplied specification. The spec consists of the key event type, followed by a colon, followed by zero or more comma separated key codes, followed by zero or more modifiers delimited by a plus sign. Ex: press:12,65+shift+ctrl

Parameters:
  `type <string>` 'key'
  `fn <function>` the function to execute
  `id <string|HTMLElement|collection>` the element(s) to bind
  `spec <string>` the keyCode and modifier specification
  `o <object>` optional context object
  `args <object>` 0..n additional arguments to provide to the listener.

#### mouseenter

`mouseenter ( type , fn , el , spec )`
Sets up a "mouseenter" listener—a listener that is called the first time the user's mouse enters the specified element(s).

Parameters:
  `type <string>` "mouseenter"
  `fn <function>` The method the event invokes.
  `el <string|node>` The element(s) to assign the listener to.
  `spec <string>` Optional. String representing a selector that must match the target of the event in order for the listener to be called.

#### mouseleave

`mouseleave ( type , fn , el , spec )`
Sets up a "mouseleave" listener—a listener that is called the first time the user's mouse leaves the specified element(s).

Parameters:
  `type <string>` "mouseleave"
  `fn <function>` The method the event invokes.
  `el <string|node>` The element(s) to assign the listener to.
  `spec <string>` Optional. String representing a selector that must match the target of the event in order for the listener to be called.

#### mousewheel

`mousewheel ( type , fn , context , args )`
Mousewheel event. This listener is automatically attached to the correct target, so one should not be supplied. Mouse wheel direction and velocity is stored in the 'mouseDelta' field.

Parameters:
  `type <string>` 'mousewheel'
  `fn <function>` the callback to execute
  `context <object>` optional context object
  `args <object>` 0..n additional arguments to provide to the listener.

#### valueChange

`valueChange ( type , fn , el , o , args )`

Event that fires when a text or input field has changed value as a result of a keystroke. Attaches a timed-out listener on the keydown event, and keeps the value to provide support for multi-keystroke character sets.

This event fires when the value of the element changes, either as a result of a keystroke, or an IME input event.

This does not replace the DOM onchange event, but rather augments it to do onchange-like logic as a result of key presses, even in multi-stroke character sets.

Known issue: If attaching to elements that are not yet available, then only the first node will be guaranteed to have the event handler attached.

Parameters:
  `type <String>` 'valueChange'
  `fn <Function>` the callback function
  `el <String|Node|etc>` the element(s) to bind
  `o <Object>` optional context object
  `args <object>` 0..n additional arguments that should be provided to the listener.

#### windowresize

`windowresize ( )`
Firefox fires the window resize event once when the resize action finishes, other browsers fire the event periodically during the resize. This code uses timeout logic to simulate the Firefox behavior in other browsers.

Copyright © 2010 Yahoo! Inc. All rights reserved.