#

API Documentation for: NEXT
Show: Inherited Protected Private Deprecated

# Container Class

Extends DisplayObject
Defined in: `Container:37`
Module: EaselJS

A Container is a nestable display list that allows you to work with compound display elements. For example you could group arm, leg, torso and head Bitmap instances together into a Person Container, and transform them as a group, while still being able to move the individual parts relative to each other. Children of containers have their `transform` and `alpha` properties concatenated with their parent Container.

For example, a Shape with x=100 and alpha=0.5, placed in a Container with `x=50` and `alpha=0.7` will be rendered to the canvas at `x=150` and `alpha=0.35`. Containers have some overhead, so you generally shouldn't create a Container to hold a single child.

#### Example

     var container = new createjs.Container();
     container.addChild(bitmapInstance, shapeInstance);
     container.x = 100;

## Constructor

### `Container`

()

Defined in `Container:37`

- Index
- Methods
- Properties
- Events

## Item Index

### Methods

- _applyFilters
- _applyShadow
- _cloneProps
- _dispatchEvent
- _getBounds
- _getFilterBounds
- _getObjectsUnderPoint
- _isMouseOpaque
- _testHit
- _testMask
- _tick
- _transformBounds
- addChild
- addChildAt
- addEventListener
- cache
- clone
- cloneChildren
- contains
- dispatchEvent
- draw
- getBounds
- getCacheDataURL
- getChildAt
- getChildByName
- getChildIndex
- getConcatenatedDisplayProps
- getConcatenatedMatrix
- getMatrix
- getNumChildren deprecated
- getObjectsUnderPoint
- getObjectUnderPoint
- getStage deprecated
- getTransformedBounds
- globalToLocal
- hasEventListener
- hitTest
- initialize deprecated
- isVisible
- localToGlobal
- localToLocal
- off
- on
- removeAllChildren
- removeAllEventListeners
- removeChild
- removeChildAt
- removeEventListener
- set
- setBounds
- setChildIndex
- setTransform
- sortChildren
- swapChildren
- swapChildrenAt
- toString
- uncache
- updateCache
- updateContext
- willTrigger

### Properties

- _bounds
- _cacheDataURL
- _cacheDataURLID
- _cacheOffsetX
- _cacheOffsetY
- _cacheScale
- _captureListeners
- _filterOffsetX
- _filterOffsetY
- _listeners
- _props
- _rectangle
- alpha
- cacheCanvas
- cacheID
- children
- compositeOperation
- cursor
- filters
- hitArea
- id
- mask
- mouseChildren
- mouseEnabled
- name
- numChildren
- parent
- regX
- regY
- rotation
- scaleX
- scaleY
- shadow
- skewX
- skewY
- snapToPixel
- stage
- tickChildren
- tickEnabled
- transformMatrix
- visible
- x
- y

### Events

- added
- click
- dblclick
- mousedown
- mouseout
- mouseover
- pressmove
- pressup
- removed
- rollout
- rollover
- tick

## Methods

### `_applyFilters`

() protected

Inherited from DisplayObject: `_applyFilters:1274`

### `_applyShadow`

(

- `ctx`
- `shadow`

)
protected

Inherited from DisplayObject: `_applyShadow:1226`

#### Parameters:

- `ctx` CanvasRenderingContext2D
- `shadow` Shadow

### `_cloneProps`

(

- `o`

)
DisplayObject protected

Inherited from DisplayObject: `_cloneProps:1193`

#### Parameters:

- `o` DisplayObject

  The DisplayObject instance which will have properties from the current DisplayObject instance copied into.

#### Returns:

DisplayObject:

o

### `_dispatchEvent`

(

- `eventObj`
- `eventPhase`

)
protected

Inherited from EventDispatcher: `_dispatchEvent:394`

#### Parameters:

- `eventObj` Object | String | Event
- `eventPhase` Object

### `_getBounds`

(

- `matrix`
- `ignoreTransform`

)
Rectangle protected

Inherited from DisplayObject but overwritten in `_getBounds:663`

#### Parameters:

- `matrix` Matrix2D
- `ignoreTransform` Boolean

  If true, does not apply this object's transform.

#### Returns:

Rectangle:

### `_getFilterBounds`

() Rectangle protected

Inherited from DisplayObject: `_getFilterBounds:1289`

#### Returns:

Rectangle:

### `_getObjectsUnderPoint`

(

- `x`
- `y`
- `arr`
- `mouse`
- `activeListener`
- `currentDepth`

)
DisplayObject protected

Defined in `_getObjectsUnderPoint:578`

#### Parameters:

- `x` Number
- `y` Number
- `arr` Array
- `mouse` Boolean

  If true, it will respect mouse interaction properties like mouseEnabled, mouseChildren, and active listeners.

- `activeListener` Boolean

  If true, there is an active mouse event listener on a parent object.

- `currentDepth` Number

  Indicates the current depth of the search.

#### Returns:

DisplayObject:

### `_isMouseOpaque`

() Boolean protected

Inherited from DisplayObject: `_isMouseOpaque:1349`

Indicates whether the display object has any mouse event listeners or a cursor.

#### Returns:

Boolean:

### `_testHit`

(

- `ctx`

)
Boolean protected

Inherited from DisplayObject: `_testHit:1257`

#### Parameters:

- `ctx` CanvasRenderingContext2D

#### Returns:

Boolean:

### `_testMask`

(

- `target`
- `x`
- `y`

)
Boolean protected

Defined in `_testMask:632`

#### Parameters:

- `target` DisplayObject
- `x` Number
- `y` Number

#### Returns:

Boolean:

Indicates whether the x/y is within the masked region.

### `_tick`

(

- `evtObj`

)
protected

Inherited from DisplayObject but overwritten in `_tick:547`

#### Parameters:

- `evtObj` Object

  An event object that will be dispatched to all tick listeners. This object is reused between dispatchers to reduce construction & GC costs.

### `_transformBounds`

(

- `bounds`
- `matrix`
- `ignoreTransform`

)
Rectangle protected

Inherited from DisplayObject: `_transformBounds:1316`

#### Parameters:

- `bounds` Rectangle
- `matrix` Matrix2D
- `ignoreTransform` Boolean

#### Returns:

Rectangle:

### `addChild`

(

- `child`

)
DisplayObject

Defined in `addChild:171`

Adds a child to the top of the display list.

#### Example

        container.addChild(bitmapInstance);

You can also add multiple children at once:

        container.addChild(bitmapInstance, shapeInstance, textInstance);

#### Parameters:

- `child` DisplayObject

  The display object to add.

#### Returns:

DisplayObject:

The child that was added, or the last child if multiple children were added.

### `addChildAt`

(

- `child`
- `index`

)
DisplayObject

Defined in `addChildAt:200`

Adds a child to the display list at the specified index, bumping children at equal or greater indexes up one, and setting its parent to this Container.

#### Example

     addChildAt(child1, index);

You can also add multiple children, such as:

     addChildAt(child1, child2, ..., index);

The index must be between 0 and numChildren. For example, to add myShape under otherShape in the display list, you could use:

     container.addChildAt(myShape, container.getChildIndex(otherShape));

This would also bump otherShape's index up by one. Fails silently if the index is out of range.

#### Parameters:

- `child` DisplayObject

  The display object to add.

- `index` Number

  The index to add the child at.

#### Returns:

DisplayObject:

Returns the last child that was added, or the last child if multiple children were added.

### `addEventListener`

(

- `type`
- `listener`
- `[useCapture]`

)
Function | Object

Inherited from EventDispatcher: `addEventListener:154`

Adds the specified event listener. Note that adding multiple listeners to the same function will result in multiple callbacks getting fired.

#### Example

     displayObject.addEventListener("click", handleClick);
     function handleClick(event) {
        // Click happened.
     }

#### Parameters:

- `type` String

  The string type of the event.

- `listener` Function | Object

  An object with a handleEvent method, or a function that will be called when the event is dispatched.

- `[useCapture]` Boolean optional

  For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.

#### Returns:

Function | Object:

Returns the listener for chaining or assignment.

### `cache`

(

- `x`
- `y`
- `width`
- `height`
- `[scale=1]`

)

Inherited from DisplayObject: `cache:749`

Draws the display object into a new canvas, which is then used for subsequent draws. For complex content that does not change frequently (ex. a Container with many children that do not move, or a complex vector Shape), this can provide for much faster rendering because the content does not need to be re-rendered each tick. The cached display object can be moved, rotated, faded, etc freely, however if its content changes, you must manually update the cache by calling `updateCache()` or `cache()` again. You must specify the cache area via the x, y, w, and h parameters. This defines the rectangle that will be rendered and cached using this display object's coordinates.

#### Example

For example if you defined a Shape that drew a circle at 0, 0 with a radius of 25:

     var shape = new createjs.Shape();
     shape.graphics.beginFill("#ff0000").drawCircle(0, 0, 25);
     myShape.cache(-25, -25, 50, 50);

Note that filters need to be defined before the cache is applied. Check out the Filter class for more information. Some filters (ex. BlurFilter) will not work as expected in conjunction with the scale param.

Usually, the resulting cacheCanvas will have the dimensions widthscale by heightscale, however some filters (ex. BlurFilter) will add padding to the canvas dimensions.

#### Parameters:

- `x` Number

  The x coordinate origin for the cache region.

- `y` Number

  The y coordinate origin for the cache region.

- `width` Number

  The width of the cache region.

- `height` Number

  The height of the cache region.

- `[scale=1]` Number optional

  The scale at which the cache will be created. For example, if you cache a vector shape using myShape.cache(0,0,100,100,2) then the resulting cacheCanvas will be 200x200 px. This lets you scale and rotate cached elements with greater fidelity. Default is 1.

### `clone`

(

- `[recursive=false]`

)
Container

Inherited from DisplayObject but overwritten in `clone:522`

Returns a clone of this Container. Some properties that are specific to this instance's current context are reverted to their defaults (for example .parent).

#### Parameters:

- `[recursive=false]` Boolean optional

  If true, all of the descendants of this container will be cloned recursively. If false, the properties of the container will be cloned, but the new instance will not have any children.

#### Returns:

Container:

A clone of the current Container instance.

### `cloneChildren`

(

- `o`

)
protected

Defined in `cloneChildren:562`

Recursively clones all children of this container, and adds them to the target container.

#### Parameters:

- `o` Container

  The target container.

### `contains`

(

- `child`

)
Boolean

Defined in `contains:430`

Returns true if the specified display object either is this container or is a descendent (child, grandchild, etc) of this container.

#### Parameters:

- `child` DisplayObject

  The DisplayObject to be checked.

#### Returns:

Boolean:

true if the specified display object either is this container or is a descendent.

### `dispatchEvent`

(

- `eventObj`
- `[bubbles]`
- `[cancelable]`

)
Boolean

Inherited from EventDispatcher: `dispatchEvent:299`

Dispatches the specified event to all listeners.

#### Example

     // Use a string event
     this.dispatchEvent("complete");

     // Use an Event instance
     var event = new createjs.Event("progress");
     this.dispatchEvent(event);

#### Parameters:

- `eventObj` Object | String | Event

  An object with a "type" property, or a string type. While a generic object will work, it is recommended to use a CreateJS Event instance. If a string is used, dispatchEvent will construct an Event instance if necessary with the specified type. This latter approach can be used to avoid event object instantiation for non-bubbling events that may not have any listeners.

- `[bubbles]` Boolean optional

  Specifies the `bubbles` value when a string was passed to eventObj.

- `[cancelable]` Boolean optional

  Specifies the `cancelable` value when a string was passed to eventObj.

#### Returns:

Boolean:

Returns false if `preventDefault()` was called on a cancelable event, true otherwise.

### `draw`

(

- `ctx`
- `[ignoreCache=false]`

)

Inherited from DisplayObject but overwritten in `draw:142`

Draws the display object into the specified context ignoring its visible, alpha, shadow, and transform. Returns true if the draw was handled (useful for overriding functionality).

NOTE: This method is mainly for internal use, though it may be useful for advanced uses.

#### Parameters:

- `ctx` CanvasRenderingContext2D

  The canvas 2D context object to draw into.

- `[ignoreCache=false]` Boolean optional

  Indicates whether the draw operation should ignore any current cache. For example, used for drawing the cache (to prevent it from simply drawing an existing cache back into itself).

### `getBounds`

() Rectangle

Inherited from DisplayObject: `getBounds:1067`

Returns a rectangle representing this object's bounds in its local coordinate system (ie. with no transformation). Objects that have been cached will return the bounds of the cache.

Not all display objects can calculate their own bounds (ex. Shape). For these objects, you can use setBounds so that they are included when calculating Container bounds.

All | All display objects support setting bounds manually using setBounds(). Likewise, display objects that have been cached using cache() will return the bounds of their cache. Manual and cache bounds will override the automatic calculations listed below.
Bitmap | Returns the width and height of the sourceRect (if specified) or image, extending from (x=0,y=0).
Sprite | Returns the bounds of the current frame. May have non-zero x/y if a frame registration point was specified in the spritesheet data. See also getFrameBounds
Container | Returns the aggregate (combined) bounds of all children that return a non-null value from getBounds().
Shape | Does not currently support automatic bounds calculations. Use setBounds() to manually define bounds.
Text | Returns approximate bounds. Horizontal values (x/width) are quite accurate, but vertical values (y/height) are not, especially when using textBaseline values other than "top".
BitmapText | Returns approximate bounds. Values will be more accurate if spritesheet frame registration points are close to (x=0,y=0).

Bounds can be expensive to calculate for some objects (ex. text, or containers with many children), and are recalculated each time you call getBounds(). You can prevent recalculation on static objects by setting the bounds explicitly:

    var bounds = obj.getBounds();
    obj.setBounds(bounds.x, bounds.y, bounds.width, bounds.height);
    // getBounds will now use the set values, instead of recalculating

To reduce memory impact, the returned Rectangle instance may be reused internally; clone the instance or copy its values if you need to retain it.

    var myBounds = obj.getBounds().clone();
    // OR:
    myRect.copy(obj.getBounds());

#### Returns:

Rectangle:

A Rectangle instance representing the bounds, or null if bounds are not available for this object.

### `getCacheDataURL`

() String

Inherited from DisplayObject: `getCacheDataURL:851`

Returns a data URL for the cache, or null if this display object is not cached. Uses cacheID to ensure a new data URL is not generated if the cache has not changed.

#### Returns:

String:

The image data url for the cache.

### `getChildAt`

(

- `index`

)
DisplayObject

Defined in `getChildAt:314`

Returns the child at the specified index.

#### Example

     container.getChildAt(2);

#### Parameters:

- `index` Number

  The index of the child to return.

#### Returns:

DisplayObject:

The child at the specified index. Returns null if there is no child at the index.

### `getChildByName`

(

- `name`

)
DisplayObject

Defined in `getChildByName:329`

Returns the child with the specified name.

#### Parameters:

- `name` String

  The name of the child to return.

#### Returns:

DisplayObject:

The child with the specified name.

### `getChildIndex`

(

- `child`

)
Number

Defined in `getChildIndex:363`

Returns the index of the specified child in the display list, or -1 if it is not in the display list.

#### Example

     var index = container.getChildIndex(child);

#### Parameters:

- `child` DisplayObject

  The child to return the index of.

#### Returns:

Number:

The index of the specified child. -1 if the child is not found.

### `getConcatenatedDisplayProps`

(

- `[props]`

)
DisplayProps

Inherited from DisplayObject: `getConcatenatedDisplayProps:999`

Generates a DisplayProps object representing the combined display properties of the object and all of its parent Containers up to the highest level ancestor (usually the Stage).

#### Parameters:

- `[props]` DisplayProps optional

  A DisplayProps object to populate with the calculated values. If null, a new DisplayProps object is returned.

#### Returns:

DisplayProps:

The combined display properties.

### `getConcatenatedMatrix`

(

- `[matrix]`

)
Matrix2D

Inherited from DisplayObject: `getConcatenatedMatrix:981`

Generates a Matrix2D object representing the combined transform of the display object and all of its parent Containers up to the highest level ancestor (usually the Stage). This can be used to transform positions between coordinate spaces, such as with localToGlobal and globalToLocal.

#### Parameters:

- `[matrix]` Matrix2D optional

  A Matrix2D object to populate with the calculated values. If null, a new Matrix2D object is returned.

#### Returns:

Matrix2D:

The combined matrix.

### `getMatrix`

(

- `matrix`

)
Matrix2D

Inherited from DisplayObject: `getMatrix:969`

Returns a matrix based on this object's current transform.

#### Parameters:

- `matrix` Matrix2D

  Optional. A Matrix2D object to populate with the calculated values. If null, a new Matrix object is returned.

#### Returns:

Matrix2D:

A matrix representing this display object's transform.

### `getNumChildren`

() Number deprecated

Defined in `getNumChildren:97`

Use the numChildren property instead.

#### Returns:

Number:

### `getObjectsUnderPoint`

(

- `x`
- `y`
- `[mode=0]`

)
Array

Defined in `getObjectsUnderPoint:460`

Returns an array of all display objects under the specified coordinates that are in this container's display list. This routine ignores any display objects with mouseEnabled set to `false`. The array will be sorted in order of visual depth, with the top-most display object at index 0. This uses shape based hit detection, and can be an expensive operation to run, so it is best to use it carefully. For example, if testing for objects under the mouse, test on tick (instead of on DisplayObject/mousemove:event), and only if the mouse's position has changed.

- By default (mode=0) this method evaluates all display objects.
- By setting the `mode` parameter to `1`, the mouseEnabled and MouseChildren:property properties will be respected.
- Setting the `mode` to `2` additionally excludes display objects that do not have active mouse event listeners or a DisplayObject:cursor:property property. That is, only objects that would normally intercept mouse interaction will be included. This can significantly improve performance in some cases by reducing the number of display objects that need to be tested.

This method accounts for both hitArea and mask.

#### Parameters:

- `x` Number

  The x position in the container to test.

- `y` Number

  The y position in the container to test.

- `[mode=0]` Number optional

  The mode to use to determine which display objects to include. 0-all, 1-respect mouseEnabled/mouseChildren, 2-only mouse opaque objects.

#### Returns:

Array:

An Array of DisplayObjects under the specified coordinates.

### `getObjectUnderPoint`

(

- `x`
- `y`
- `mode`

)
DisplayObject

Defined in `getObjectUnderPoint:492`

Similar to getObjectsUnderPoint, but returns only the top-most display object. This runs significantly faster than `getObjectsUnderPoint()`, but is still potentially an expensive operation. See getObjectsUnderPoint for more information.

#### Parameters:

- `x` Number

  The x position in the container to test.

- `y` Number

  The y position in the container to test.

- `mode` Number

  The mode to use to determine which display objects to include. 0-all, 1-respect mouseEnabled/mouseChildren, 2-only mouse opaque objects.

#### Returns:

DisplayObject:

The top-most display object under the specified coordinates.

### `getStage`

() Stage deprecated

Inherited from DisplayObject: `getStage:658`

Use the stage property instead.

#### Returns:

Stage:

### `getTransformedBounds`

() Rectangle

Inherited from DisplayObject: `getTransformedBounds:1133`

Returns a rectangle representing this object's bounds in its parent's coordinate system (ie. with transformations applied). Objects that have been cached will return the transformed bounds of the cache.

Not all display objects can calculate their own bounds (ex. Shape). For these objects, you can use setBounds so that they are included when calculating Container bounds.

To reduce memory impact, the returned Rectangle instance may be reused internally; clone the instance or copy its values if you need to retain it.

Container instances calculate aggregate bounds for all children that return bounds via getBounds.

#### Returns:

Rectangle:

A Rectangle instance representing the bounds, or null if bounds are not available for this object.

### `globalToLocal`

(

- `x`
- `y`
- `[pt]`

)
Point

Inherited from DisplayObject: `globalToLocal:888`

Transforms the specified x and y position from the global (stage) coordinate space to the coordinate space of the display object. For example, this could be used to determine the current mouse position within the display object. Returns a Point instance with x and y properties correlating to the transformed position in the display object's coordinate space.

#### Example

     displayObject.x = 300;
     displayObject.y = 200;
     stage.addChild(displayObject);
     var point = displayObject.globalToLocal(100, 100);
     // Results in x=-200, y=-100

#### Parameters:

- `x` Number

  The x position on the stage to transform.

- `y` Number

  The y position on the stage to transform.

- `[pt]` Point | Object optional

  An object to copy the result into. If omitted a new Point object with x/y properties will be returned.

#### Returns:

Point:

A Point instance with x and y properties correlating to the transformed position in the display object's coordinate space.

### `hasEventListener`

(

- `type`

)
Boolean

Inherited from EventDispatcher: `hasEventListener:353`

Indicates whether there is at least one listener for the specified event type.

#### Parameters:

- `type` String

  The string type of the event.

#### Returns:

Boolean:

Returns true if there is at least one listener for the specified event.

### `hitTest`

(

- `x`
- `y`

)
Boolean

Inherited from DisplayObject but overwritten in `hitTest:445`

Tests whether the display object intersects the specified local point (ie. draws a pixel with alpha > 0 at the specified position). This ignores the alpha, shadow and compositeOperation of the display object, and all transform properties including regX/Y.

#### Parameters:

- `x` Number

  The x position to check in the display object's local coordinates.

- `y` Number

  The y position to check in the display object's local coordinates.

#### Returns:

Boolean:

A Boolean indicating whether there is a visible section of a DisplayObject that overlaps the specified coordinates.

### `initialize`

() deprecated

Inherited from EventDispatcher but overwritten in `initialize:121`

Deprecated: in favour of `createjs.promote()`

Constructor alias for backwards compatibility. This method will be removed in future versions. Subclasses should be updated to use Utility Methods/extends.

### `isVisible`

() Boolean

Inherited from DisplayObject but overwritten in `isVisible:129`

Returns true or false indicating whether the display object would be visible if drawn to a canvas. This does not account for whether it would be visible within the boundaries of the stage.

NOTE: This method is mainly for internal use, though it may be useful for advanced uses.

#### Returns:

Boolean:

Boolean indicating whether the display object would be visible if drawn to a canvas

### `localToGlobal`

(

- `x`
- `y`
- `[pt]`

)
Point

Inherited from DisplayObject: `localToGlobal:863`

Transforms the specified x and y position from the coordinate space of the display object to the global (stage) coordinate space. For example, this could be used to position an HTML label over a specific point on a nested display object. Returns a Point instance with x and y properties correlating to the transformed coordinates on the stage.

#### Example

     displayObject.x = 300;
     displayObject.y = 200;
     stage.addChild(displayObject);
     var point = displayObject.localToGlobal(100, 100);
     // Results in x=400, y=300

#### Parameters:

- `x` Number

  The x position in the source display object to transform.

- `y` Number

  The y position in the source display object to transform.

- `[pt]` Point | Object optional

  An object to copy the result into. If omitted a new Point object with x/y properties will be returned.

#### Returns:

Point:

A Point instance with x and y properties correlating to the transformed coordinates on the stage.

### `localToLocal`

(

- `x`
- `y`
- `target`
- `[pt]`

)
Point

Inherited from DisplayObject: `localToLocal:913`

Transforms the specified x and y position from the coordinate space of this display object to the coordinate space of the target display object. Returns a Point instance with x and y properties correlating to the transformed position in the target's coordinate space. Effectively the same as using the following code with localToGlobal and globalToLocal.

     var pt = this.localToGlobal(x, y);
     pt = target.globalToLocal(pt.x, pt.y);

#### Parameters:

- `x` Number

  The x position in the source display object to transform.

- `y` Number

  The y position on the source display object to transform.

- `target` DisplayObject

  The target display object to which the coordinates will be transformed.

- `[pt]` Point | Object optional

  An object to copy the result into. If omitted a new Point object with x/y properties will be returned.

#### Returns:

Point:

Returns a Point instance with x and y properties correlating to the transformed position in the target's coordinate space.

### `off`

(

- `type`
- `listener`
- `[useCapture]`

)

Inherited from EventDispatcher: `off:263`

A shortcut to the removeEventListener method, with the same parameters and return value. This is a companion to the .on method.

IMPORTANT: To remove a listener added with `on`, you must pass in the returned wrapper function as the listener. See on for an example.

#### Parameters:

- `type` String

  The string type of the event.

- `listener` Function | Object

  The listener function or object.

- `[useCapture]` Boolean optional

  For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.

### `on`

(

- `type`
- `listener`
- `[scope]`
- `[once=false]`
- `[data]`
- `[useCapture=false]`

)
Function

Inherited from EventDispatcher: `on:187`

A shortcut method for using addEventListener that makes it easier to specify an execution scope, have a listener only run once, associate arbitrary data with the listener, and remove the listener.

This method works by creating an anonymous wrapper function and subscribing it with addEventListener. The wrapper function is returned for use with `removeEventListener` (or `off`).

IMPORTANT: To remove a listener added with `on`, you must pass in the returned wrapper function as the listener, or use remove. Likewise, each time you call `on` a NEW wrapper function is subscribed, so multiple calls to `on` with the same params will create multiple listeners.

#### Example

        var listener = myBtn.on("click", handleClick, null, false, {count:3});
        function handleClick(evt, data) {
            data.count -= 1;
            console.log(this == myBtn); // true - scope defaults to the dispatcher
            if (data.count == 0) {
                alert("clicked 3 times!");
                myBtn.off("click", listener);
                // alternately: evt.remove();
            }
        }

#### Parameters:

- `type` String

  The string type of the event.

- `listener` Function | Object

  An object with a handleEvent method, or a function that will be called when the event is dispatched.

- `[scope]` Object optional

  The scope to execute the listener in. Defaults to the dispatcher/currentTarget for function listeners, and to the listener itself for object listeners (ie. using handleEvent).

- `[once=false]` Boolean optional

  If true, the listener will remove itself after the first time it is triggered.

- `[data]` optional

  Arbitrary data that will be included as the second parameter when the listener is called.

- `[useCapture=false]` Boolean optional

  For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.

#### Returns:

Function:

Returns the anonymous function that was created and assigned as the listener. This is needed to remove the listener later using .removeEventListener.

### `removeAllChildren`

()

Defined in `removeAllChildren:300`

Removes all children from the display list.

#### Example

    container.removeAllChildren();

### `removeAllEventListeners`

(

- `[type]`

)

Inherited from EventDispatcher: `removeAllEventListeners:277`

Removes all listeners for the specified type, or all listeners of all types.

#### Example

     // Remove all listeners
     displayObject.removeAllEventListeners();

     // Remove all click listeners
     displayObject.removeAllEventListeners("click");

#### Parameters:

- `[type]` String optional

  The string type of the event. If omitted, all listeners for all types will be removed.

### `removeChild`

(

- `child`

)
Boolean

Defined in `removeChild:239`

Removes the specified child from the display list. Note that it is faster to use removeChildAt() if the index is already known.

#### Example

     container.removeChild(child);

You can also remove multiple children:

     removeChild(child1, child2, ...);

Returns true if the child (or children) was removed, or false if it was not in the display list.

#### Parameters:

- `child` DisplayObject

  The child to remove.

#### Returns:

Boolean:

true if the child (or children) was removed, or false if it was not in the display list.

### `removeChildAt`

(

- `index`

)
Boolean

Defined in `removeChildAt:266`

Removes the child at the specified index from the display list, and sets its parent to null.

#### Example

     container.removeChildAt(2);

You can also remove multiple children:

     container.removeChild(2, 7, ...)

Returns true if the child (or children) was removed, or false if any index was out of range.

#### Parameters:

- `index` Number

  The index of the child to remove.

#### Returns:

Boolean:

true if the child (or children) was removed, or false if any index was out of range.

### `removeEventListener`

(

- `type`
- `listener`
- `[useCapture]`

)

Inherited from EventDispatcher: `removeEventListener:233`

Removes the specified event listener.

Important Note: that you must pass the exact function reference used when the event was added. If a proxy function, or function closure is used as the callback, the proxy/closure reference must be used - a new proxy or closure will not work.

#### Example

     displayObject.removeEventListener("click", handleClick);

#### Parameters:

- `type` String

  The string type of the event.

- `listener` Function | Object

  The listener function or object.

- `[useCapture]` Boolean optional

  For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.

### `set`

(

- `props`

)
DisplayObject chainable

Inherited from DisplayObject: `set:1049`

Provides a chainable shortcut method for setting a number of properties on the instance.

#### Example

     var myGraphics = new createjs.Graphics().beginFill("#ff0000").drawCircle(0, 0, 25);
     var shape = stage.addChild(new Shape()).set({graphics:myGraphics, x:100, y:100, alpha:0.5});

#### Parameters:

- `props` Object

  A generic object containing properties to copy to the DisplayObject instance.

#### Returns:

DisplayObject:

Returns the instance the method is called on (useful for chaining calls.)

### `setBounds`

(

- `x`
- `y`
- `width`
- `height`

)

Inherited from DisplayObject: `setBounds:1152`

Allows you to manually specify the bounds of an object that either cannot calculate their own bounds (ex. Shape & Text) for future reference, or so the object can be included in Container bounds. Manually set bounds will always override calculated bounds.

The bounds should be specified in the object's local (untransformed) coordinates. For example, a Shape instance with a 25px radius circle centered at 0,0 would have bounds of (-25, -25, 50, 50).

#### Parameters:

- `x` Number

  The x origin of the bounds. Pass null to remove the manual bounds.

- `y` Number

  The y origin of the bounds.

- `width` Number

  The width of the bounds.

- `height` Number

  The height of the bounds.

### `setChildIndex`

(

- `child`
- `index`

)

Defined in `setChildIndex:413`

Changes the depth of the specified child. Fails silently if the child is not a child of this container, or the index is out of range.

#### Parameters:

- `child` DisplayObject
- `index` Number

### `setTransform`

(

- `[x=0]`
- `[y=0]`
- `[scaleX=1]`
- `[scaleY=1]`
- `[rotation=0]`
- `[skewX=0]`
- `[skewY=0]`
- `[regX=0]`
- `[regY=0]`

)
DisplayObject chainable

Inherited from DisplayObject: `setTransform:935`

Shortcut method to quickly set the transform properties on the display object. All parameters are optional. Omitted parameters will have the default value set.

#### Example

     displayObject.setTransform(100, 100, 2, 2);

#### Parameters:

- `[x=0]` Number optional

  The horizontal translation (x position) in pixels

- `[y=0]` Number optional

  The vertical translation (y position) in pixels

- `[scaleX=1]` Number optional

  The horizontal scale, as a percentage of 1

- `[scaleY=1]` Number optional

  the vertical scale, as a percentage of 1

- `[rotation=0]` Number optional

  The rotation, in degrees

- `[skewX=0]` Number optional

  The horizontal skew factor

- `[skewY=0]` Number optional

  The vertical skew factor

- `[regX=0]` Number optional

  The horizontal registration point in pixels

- `[regY=0]` Number optional

  The vertical registration point in pixels

#### Returns:

DisplayObject:

Returns this instance. Useful for chaining commands.

### `sortChildren`

(

- `sortFunction`

)

Defined in `sortChildren:343`

Performs an array sort operation on the child list.

#### Example: Display children with a higher y in front.

     var sortFunction = function(obj1, obj2, options) {
         if (obj1.y > obj2.y) { return 1; }
         if (obj1.y < obj2.y) { return -1; }
         return 0;
     }
     container.sortChildren(sortFunction);

#### Parameters:

- `sortFunction` Function

  the function to use to sort the child list. See JavaScript's `Array.sort` documentation for details.

### `swapChildren`

(

- `child1`
- `child2`

)

Defined in `swapChildren:393`

Swaps the specified children's depth in the display list. Fails silently if either child is not a child of this Container.

#### Parameters:

- `child1` DisplayObject
- `child2` DisplayObject

### `swapChildrenAt`

(

- `index1`
- `index2`

)

Defined in `swapChildrenAt:378`

Swaps the children at the specified indexes. Fails silently if either index is out of range.

#### Parameters:

- `index1` Number
- `index2` Number

### `toString`

() String

Inherited from EventDispatcher but overwritten in `toString:536`

Returns a string representation of this object.

#### Returns:

String:

a string representation of the instance.

### `uncache`

()

Inherited from DisplayObject: `uncache:841`

Clears the current cache. See cache for more information.

### `updateCache`

(

- `compositeOperation`

)

Inherited from DisplayObject: `updateCache:792`

Redraws the display object to its cache. Calling updateCache without an active cache will throw an error. If compositeOperation is null the current cache will be cleared prior to drawing. Otherwise the display object will be drawn over the existing cache using the specified compositeOperation.

#### Example

Clear the current graphics of a cached shape, draw some new instructions, and then update the cache. The new line will be drawn on top of the old one.

     // Not shown: Creating the shape, and caching it.
     shapeInstance.clear();
     shapeInstance.setStrokeStyle(3).beginStroke("#ff0000").moveTo(100, 100).lineTo(200,200);
     shapeInstance.updateCache();

#### Parameters:

- `compositeOperation` String

  The compositeOperation to use, or null to clear the cache and redraw it. whatwg spec on compositing.

### `updateContext`

(

- `ctx`

)

Inherited from DisplayObject: `updateContext:717`

Applies this display object's transformation, alpha, globalCompositeOperation, clipping path (mask), and shadow to the specified context. This is typically called prior to draw.

#### Parameters:

- `ctx` CanvasRenderingContext2D

  The canvas 2D to update.

### `willTrigger`

(

- `type`

)
Boolean

Inherited from EventDispatcher: `willTrigger:364`

Indicates whether there is at least one listener for the specified event type on this object or any of its ancestors (parent, parent's parent, etc). A return value of true indicates that if a bubbling event of the specified type is dispatched from this object, it will trigger at least one listener.

This is similar to hasEventListener, but it searches the entire event flow for a listener, not just this object.

#### Parameters:

- `type` String

  The string type of the event.

#### Returns:

Boolean:

Returns `true` if there is at least one listener for the specified event.

## Properties

### `_bounds`

Rectangle protected

Inherited from DisplayObject: `_bounds:468`

Default: null

### `_cacheDataURL`

String protected

Inherited from DisplayObject: `_cacheDataURL:444`

Default: null

### `_cacheDataURLID`

Number protected

Inherited from DisplayObject: `_cacheDataURLID:436`

Default: 0

### `_cacheOffsetX`

Number protected

Inherited from DisplayObject: `_cacheOffsetX:396`

Default: 0

### `_cacheOffsetY`

Number protected

Inherited from DisplayObject: `_cacheOffsetY:404`

Default: 0

### `_cacheScale`

Number protected

Inherited from DisplayObject: `_cacheScale:428`

Default: 1

### `_captureListeners`

Object protected

Inherited from EventDispatcher: `_captureListeners:106`

### `_filterOffsetX`

Number protected

Inherited from DisplayObject: `_filterOffsetX:412`

Default: 0

### `_filterOffsetY`

Number protected

Inherited from DisplayObject: `_filterOffsetY:420`

Default: 0

### `_listeners`

Object protected

Inherited from EventDispatcher: `_listeners:99`

### `_props`

DisplayObject protected

Inherited from DisplayObject: `_props:452`

Default: null

### `_rectangle`

Rectangle protected

Inherited from DisplayObject: `_rectangle:460`

Default: null

### `alpha`

Number

Inherited from DisplayObject: `alpha:144`

The alpha (transparency) for this display object. 0 is fully transparent, 1 is fully opaque.

Default: 1

### `cacheCanvas`

HTMLCanvasElement | Object

Inherited from DisplayObject: `cacheCanvas:152`

If a cache is active, this returns the canvas that holds the cached version of this display object. See Cache for more information.

Default: null

### `cacheID`

Number

Inherited from DisplayObject: `cacheID:162`

Returns an ID number that uniquely identifies the current cache for this display object. This can be used to determine if the cache has changed since a previous check.

Default: 0

### `children`

Array

Defined in `children:62`

The array of children in the display list. You should usually use the child management methods such as addChild, removeChild, swapChildren, etc, rather than accessing this directly, but it is included for advanced uses.

Default: null

### `compositeOperation`

String

Inherited from DisplayObject: `compositeOperation:327`

The composite operation indicates how the pixels of this display object will be composited with the elements behind it. If `null`, this property is inherited from the parent container. For more information, read the whatwg spec on compositing.

Default: null

### `cursor`

String

Inherited from DisplayObject: `cursor:384`

A CSS cursor (ex. "pointer", "help", "text", etc) that will be displayed when the user hovers over this display object. You must enable mouseover events using the enableMouseOver method to use this property. Setting a non-null cursor on a Container will override the cursor set on its descendants.

Default: null

### `filters`

Array

Inherited from DisplayObject: `filters:348`

An array of Filter objects to apply to this display object. Filters are only applied / updated when Cache or UpdateCache is called on the display object, and only apply to the area that is cached.

Default: null

### `hitArea`

DisplayObject

Inherited from DisplayObject: `hitArea:367`

A display object that will be tested when checking mouse interactions or testing getObjectsUnderPoint. The hit area will have its transformation applied relative to this display object's coordinate space (as though the hit test object were a child of this display object and relative to its regX/Y). The hitArea will be tested using only its own `alpha` value regardless of the alpha value on the target display object, or the target's ancestors (parents).

If set on a Container, children of the Container will not receive mouse events. This is similar to setting MouseChildren to false.

Note that hitArea is NOT currently used by the `hitTest()` method, nor is it supported for Stage.

Default: null

### `id`

Number

Inherited from DisplayObject: `id:171`

Unique ID for this display object. Makes display objects easier for some uses.

Default: -1

### `mask`

Shape

Inherited from DisplayObject: `mask:358`

A Shape instance that defines a vector mask (clipping path) for this display object. The shape's transformation will be applied relative to the display object's parent coordinates (as if it were a child of the parent).

Default: null

### `mouseChildren`

Boolean

Defined in `mouseChildren:73`

Indicates whether the children of this container are independently enabled for mouse/pointer interaction. If false, the children will be aggregated under the container - for example, a click on a child shape would trigger a click event on the container.

Default: true

### `mouseEnabled`

Boolean

Inherited from DisplayObject: `mouseEnabled:179`

Indicates whether to include this object when running mouse interactions. Setting this to `false` for children of a Container will cause events on the Container to not fire when that child is clicked. Setting this property to `false` does not prevent the getObjectsUnderPoint method from returning the child.

Note: In EaselJS 0.7.0, the mouseEnabled property will not work properly with nested Containers. Please check out the latest NEXT version in GitHub for an updated version with this issue resolved. The fix will be provided in the next release of EaselJS.

Default: true

### `name`

String

Inherited from DisplayObject: `name:204`

An optional name for this display object. Included in toString . Useful for debugging.

Default: null

### `numChildren`

Number

Defined in `numChildren:107`

Returns the number of children in the container.

### `parent`

Container final

Inherited from DisplayObject: `parent:213`

A reference to the Container or Stage object that contains this display object, or null if it has not been added to one.

Default: null

### `regX`

Number

Inherited from DisplayObject: `regX:225`

The left offset for this display object's registration point. For example, to make a 100x100px Bitmap rotate around its center, you would set regX and regY to 50.

Default: 0

### `regY`

Number

Inherited from DisplayObject: `regY:234`

The y offset for this display object's registration point. For example, to make a 100x100px Bitmap rotate around its center, you would set regX and regY to 50.

Default: 0

### `rotation`

Number

Inherited from DisplayObject: `rotation:243`

The rotation in degrees for this display object.

Default: 0

### `scaleX`

Number

Inherited from DisplayObject: `scaleX:251`

The factor to stretch this display object horizontally. For example, setting scaleX to 2 will stretch the display object to twice its nominal width. To horizontally flip an object, set the scale to a negative number.

Default: 1

### `scaleY`

Number

Inherited from DisplayObject: `scaleY:260`

The factor to stretch this display object vertically. For example, setting scaleY to 0.5 will stretch the display object to half its nominal height. To vertically flip an object, set the scale to a negative number.

Default: 1

### `shadow`

Shadow

Inherited from DisplayObject: `shadow:285`

A shadow object that defines the shadow to render on this display object. Set to `null` to remove a shadow. If null, this property is inherited from the parent container.

Default: null

### `skewX`

Number

Inherited from DisplayObject: `skewX:269`

The factor to skew this display object horizontally.

Default: 0

### `skewY`

Number

Inherited from DisplayObject: `skewY:277`

The factor to skew this display object vertically.

Default: 0

### `snapToPixel`

Boolean

Inherited from DisplayObject: `snapToPixel:338`

Indicates whether the display object should be drawn to a whole pixel when Stage/snapToPixelEnabled is true. To enable/disable snapping on whole categories of display objects, set this value on the prototype (Ex. Text.prototype.snapToPixel = true).

Default: true

### `stage`

Stage

Inherited from DisplayObject: `stage:672`

Returns the Stage instance that this display object will be rendered on, or null if it has not been added to one.

### `tickChildren`

Boolean

Defined in `tickChildren:83`

If false, the tick will not be propagated to children of this Container. This can provide some performance benefits. In addition to preventing the "tick" event from being dispatched, it will also prevent tick related updates on some display objects (ex. Sprite & MovieClip frame advancing, DOMElement visibility handling).

Default: true

### `tickEnabled`

Boolean

Inherited from DisplayObject: `tickEnabled:194`

If false, the tick will not run on this display object (or its children). This can provide some performance benefits. In addition to preventing the "tick" event from being dispatched, it will also prevent tick related updates on some display objects (ex. Sprite & MovieClip frame advancing, DOMElement visibility handling).

Default: true

### `transformMatrix`

Matrix2D

Inherited from DisplayObject: `transformMatrix:318`

If set, defines the transformation for this display object, overriding all other transformation properties (x, y, rotation, scale, skew).

Default: null

### `visible`

Boolean

Inherited from DisplayObject: `visible:294`

Indicates whether this display object should be rendered to the canvas and included when running the Stage Stage/getObjectsUnderPoint method.

Default: true

### `x`

Number

Inherited from DisplayObject: `x:303`

The x (horizontal) position of the display object, relative to its parent.

Default: 0

### `y`

Number

Inherited from DisplayObject: `y:311`

Default: 0

## Events

### `added`

Inherited from DisplayObject: `added:632`

Dispatched when the display object is added to a parent container.

### `click`

Inherited from DisplayObject: `click:546`

Available since 0.6.0

Dispatched when the user presses their left mouse button and then releases it while over the display object. See the MouseEvent class for a listing of event properties.

### `dblclick`

Inherited from DisplayObject: `dblclick:553`

Available since 0.6.0

Dispatched when the user double clicks their left mouse button over this display object. See the MouseEvent class for a listing of event properties.

### `mousedown`

Inherited from DisplayObject: `mousedown:539`

Available since 0.6.0

Dispatched when the user presses their left mouse button over the display object. See the MouseEvent class for a listing of event properties.

### `mouseout`

Inherited from DisplayObject: `mouseout:568`

Available since 0.6.0

Dispatched when the user's mouse leaves this display object. This event must be enabled using enableMouseOver. See also rollout. See the MouseEvent class for a listing of event properties.

### `mouseover`

Inherited from DisplayObject: `mouseover:560`

Available since 0.6.0

Dispatched when the user's mouse enters this display object. This event must be enabled using enableMouseOver. See also rollover. See the MouseEvent class for a listing of event properties.

### `pressmove`

Inherited from DisplayObject: `pressmove:616`

Available since 0.7.0

After a mousedown occurs on a display object, a pressmove event will be generated on that object whenever the mouse moves until the mouse press is released. This can be useful for dragging and similar operations.

### `pressup`

Inherited from DisplayObject: `pressup:624`

Available since 0.7.0

After a mousedown occurs on a display object, a pressup event will be generated on that object when that mouse press is released. This can be useful for dragging and similar operations.

### `removed`

Inherited from DisplayObject: `removed:637`

Dispatched when the display object is removed from its parent container.

### `rollout`

Inherited from DisplayObject: `rollout:596`

Available since 0.7.0

This event is similar to mouseout, with the following differences: it does not bubble, and it considers Container instances as an aggregate of their content.

For example, myContainer contains two overlapping children: shapeA and shapeB. The user moves their mouse over shapeA, then directly on to shapeB, then off both. With a listener for Mouseout:event on myContainer, two events would be received, each targeting a child element:

1. when the mouse leaves shapeA (target=shapeA)

2. when the mouse leaves shapeB (target=shapeB)

However, with a listener for "rollout" instead, only a single event is received when the mouse leaves the aggregate myContainer content (target=myContainer).

This event must be enabled using enableMouseOver. See the MouseEvent class for a listing of event properties.

### `rollover`

Inherited from DisplayObject: `rollover:576`

Available since 0.7.0

This event is similar to mouseover, with the following differences: it does not bubble, and it considers Container instances as an aggregate of their content.

For example, myContainer contains two overlapping children: shapeA and shapeB. The user moves their mouse over shapeA and then directly on to shapeB. With a listener for Mouseover:event on myContainer, two events would be received, each targeting a child element:

1. when the mouse enters shapeA (target=shapeA)

2. when the mouse enters shapeB (target=shapeB)

However, with a listener for "rollover" instead, only a single event is received when the mouse first enters the aggregate myContainer content (target=myContainer).

This event must be enabled using enableMouseOver. See the MouseEvent class for a listing of event properties.

### `tick`

Inherited from DisplayObject: `tick:642`

Available since 0.6.0

Dispatched on each display object on a stage whenever the stage updates. This occurs immediately before the rendering (draw) pass. When update is called, first all display objects on the stage dispatch the tick event, then all of the display objects are drawn to stage. Children will have their Tick:event event dispatched in order of their depth prior to the event being dispatched on their parent.

#### Event Payload:

- `target` Object

  The object that dispatched the event.

- `type` String

  The event type.

- `params` Array

  An array containing any arguments that were passed to the Stage.update() method. For example if you called stage.update("hello"), then the params would be ["hello"].