# DisplayObjectContainer Class

Extends DisplayObject
Defined in: `js/display/DisplayObjectContainer.js:15`
Module: view
Parent Module: StructureJS

The DisplayObjectContainer class is the base class for all objects that can be placed on the display list.

## Index

Show: Inherited Protected Private Deprecated

### Properties

- _listeners
- alpha
- children
- ctx
- height
- isCreated
- isEnabled
- mouseChildren
- mouseEnabled
- name
- numChildren
- parent
- rotation
- scaleX
- scaleY
- sjsId
- stage
- unscaledHeight
- unscaledWidth
- useHandCursor
- visible
- width
- x
- y

### Methods

- DisplayObjectContainer constructor
- addChild
- addChildAt
- addEventListener
- addEventListenerOnce
- contains
- create
- destroy
- disable
- dispatchEvent
- enable
- getChildAt
- getChildByCid
- getChildIndex
- getEventListeners
- getQualifiedClassName
- hasEventListener
- layout
- removeChild
- removeChildren
- removeEventListener
- swapChildren
- swapChildrenAt

## Properties

### `_listeners` Array. protected

Inherited from EventDispatcher: `js/event/EventDispatcher.js:39`

Holds a reference to added listeners.

### `alpha` Number public

Inherited from DisplayObject: `js/display/DisplayObject.js:126`

Indicates the alpha transparency value of the object specified.

### `children` Array. public

Defined in `js/display/DisplayObjectContainer.js:41`

A reference to the child DisplayObject instances to this parent object instance.

### `ctx` CanvasRenderingContext2D public

Inherited from DisplayObject: `js/display/DisplayObject.js:39`

The CanvasRenderingContext2D interface provides the 2D rendering context for the drawing surface of a canvas element. This property is only used with the canvas specific display objects.

### `height` Number public

Inherited from DisplayObject: `js/display/DisplayObject.js:75`

Indicates the height of the display object, in pixels.

Default: 0

### `isCreated` Boolean public

Inherited from DisplayObject: `js/display/DisplayObject.js:158`

The isCreated property is used to keep track if it is the first time this DisplayObject is created.

Default: false

### `isEnabled` Boolean public

Inherited from ObjectManager: `js/ObjectManager.js:31`

The isEnabled property is used to keep track of the enabled state of the object.

Default: false

### `mouseChildren` Boolean public

Defined in `js/display/DisplayObjectContainer.js:50`

Determines whether or not the children of the object are mouse enabled.

### `mouseEnabled` Boolean public

Inherited from DisplayObject: `js/display/DisplayObject.js:142`

Specifies whether this object receives mouse

### `name` String public

Inherited from DisplayObject: `js/display/DisplayObject.js:167`

Indicates the instance name of the DisplayObject.

### `numChildren` Int public

Defined in `js/display/DisplayObjectContainer.js:31`

Returns the number of children of this object.

Default: 0

### `parent` Any public

Inherited from EventDispatcher: `js/event/EventDispatcher.js:47`

Indicates the object that contains a child object. Uses the parent property to specify a relative path to display objects that are above the current display object in the display list hierarchy and helps facilitate event bubbling.

### `rotation` Number public

Inherited from DisplayObject: `js/display/DisplayObject.js:118`

Indicates the rotation of the DisplayObject instance, in degrees, from its original orientation.

### `scaleX` Number public

Inherited from DisplayObject: `js/display/DisplayObject.js:102`

Indicates the horizontal scale (percentage) of the object as applied from the registration point.

### `scaleY` Number public

Inherited from DisplayObject: `js/display/DisplayObject.js:110`

Indicates the vertical scale (percentage) of an object as applied from the registration point of the object.

### `sjsId` Int public

Inherited from BaseObject: `js/BaseObject.js:27`

The sjsId (StructureJS ID) is a unique identifier automatically assigned to most StructureJS objects upon instantiation.

Default: null

### `stage` Any public

Inherited from DisplayObject: `js/display/DisplayObject.js:31`

The Stage of the display object.

### `unscaledHeight` Number public

Inherited from DisplayObject: `js/display/DisplayObject.js:93`

A property providing access to the unscaledHeight.

Default: 100

### `unscaledWidth` Number public

Inherited from DisplayObject: `js/display/DisplayObject.js:84`

A property providing access to the unscaledWidth.

Default: 100

### `useHandCursor` Boolean public

Inherited from DisplayObject: `js/display/DisplayObject.js:150`

A Boolean value that indicates whether the pointing hand (hand cursor) appears when the pointer rolls over a display object.

### `visible` Boolean public

Inherited from DisplayObject: `js/display/DisplayObject.js:134`

Whether or not the display object is visible.

### `width` Number public

Inherited from DisplayObject: `js/display/DisplayObject.js:66`

Indicates the width of the display object, in pixels.

Default: 0

### `x` Number public

Inherited from DisplayObject: `js/display/DisplayObject.js:48`

A property providing access to the x position.

Default: 0

### `y` Number public

Inherited from DisplayObject: `js/display/DisplayObject.js:57`

A property providing access to the y position.

Default: 0

There are no properties that match your current filter settings. You can change your filter settings in the index section on this page. index

## Constructor

### `DisplayObjectContainer` ()

Defined in `js/display/DisplayObjectContainer.js:15`

## Methods

### `addChild`
(

- `child`

)
DisplayObjectContainer public chainable

Defined in `js/display/DisplayObjectContainer.js:59`

Adds a child DisplayObject instance to this parent object instance. The child is added to the front (top) of all other children in this parent object instance. (To add a child to a specific index position, use the addChildAt() method.)

If you add a child object that already has a different parent, the object is removed from the child list of the other parent object.

#### Parameters:

- `child` DisplayObject

  The DisplayObject instance to add as a child of this DisplayObjectContainer instance.

#### Returns:

DisplayObjectContainer:

Returns an instance of itself.

### `addChildAt`
(

- `child`
- `index`

)
DisplayObjectContainer public chainable

Defined in `js/display/DisplayObjectContainer.js:82`

Adds a child DisplayObject instance to this DisplayObjectContainerContainer instance. The child is added at the index position specified. An index of 0 represents the back (bottom) of the display list for this DisplayObjectContainerContainer object.

#### Parameters:

- `child` DisplayObject

  The DisplayObject instance to add as a child of this object instance.

- `index` Int

  The index position to which the child is added. If you specify a currently occupied index position, the child object that exists at that position and all higher positions are moved up one position in the child list.

#### Returns:

DisplayObjectContainer:

Returns an instance of itself.

### `addEventListener`
(

- `type`
- `callback`
- `scope`
- `[priority=0]`

)
public chainable

Inherited from EventDispatcher: `js/event/EventDispatcher.js:59`

Registers an event listener object with an EventDispatcher object so the listener receives notification of an event.

#### Parameters:

- `type` String

  The type of event.

- `callback` Function

  The listener function that processes the event. This function must accept an Event object as its only parameter and must return nothing, as this example shows. @example function(event:Event):void

- `scope` Any

  Binds the scope to a particular object (scope is basically what "this" refers to in your function). This can be very useful in JavaScript because scope isn't generally maintained.

- `[priority=0]` Int optional

  Influences the order in which the listeners are called. Listeners with lower priorities are called after ones with higher priorities.

#### Example:

     this.addEventListener(BaseEvent.CHANGE, this._handlerMethod, this);

     _handlerMethod(event) {
         console.log(event.target + " sent the event.");
         console.log(event.type, event.data);
     }

### `addEventListenerOnce`
(

- `type`
- `callback`
- `scope`
- `[priority=0]`

)
public chainable

Inherited from EventDispatcher: `js/event/EventDispatcher.js:102`

Registers an event listener object once with an EventDispatcher object so the listener will receive the notification of an event.

#### Parameters:

- `type` String

  The type of event.

- `callback` Function

  The listener function that processes the event. This function must accept an Event object as its only parameter and must return nothing, as this example shows. @example function(event:Event):void

- `scope` Any

  Binds the scope to a particular object (scope is basically what "this" refers to in your function). This can be very useful in JavaScript because scope isn't generally maintained.

- `[priority=0]` Int optional

  Influences the order in which the listeners are called. Listeners with lower priorities are called after ones with higher priorities.

#### Example:

     this.addEventListenerOnce(BaseEvent.CHANGE, this._handlerMethod, this);

     _handlerMethod(event) {
         console.log(event.target + " sent the event.");
         console.log(event.type, event.data);
     }

### `contains`
(

- `child`

)
Boolean public

Defined in `js/display/DisplayObjectContainer.js:187`

Determines whether the specified display object is a child of the DisplayObject instance or the instance itself. The search includes the entire display list including this DisplayObject instance.

#### Parameters:

- `child` DisplayObject

  The child object to test.

#### Returns:

Boolean:

true if the child object is a child of the DisplayObject or the container itself; otherwise false.

### `create` () DisplayObject public chainable

Inherited from DisplayObject: `js/display/DisplayObject.js:176`

The create function is intended to provide a consistent place for the creation or initializing the view. It will automatically be called the first time that the view is added to a DisplayObjectContainer. It is critical that all subclasses call the super for this function in their overridden methods.

#### Returns:

DisplayObject:

Returns an instance of itself.

### `destroy` () Void public

Inherited from BaseObject: `js/BaseObject.js:55`

The purpose of the destroy method is to make an object ready for garbage collection. This should be thought of as a one way function. Once destroy is called no further methods should be called on the object or properties accessed. It is the responsibility of those who implement this function to stop all running Timers, all running Sounds, and take any other steps necessary to make an object eligible for garbage collection.

By default the destroy method will null out all properties of the class automatically. You should call destroy on other objects before calling the super.

#### Returns:

Void:

#### Example:

    destroy() {
         this.disable();

         this._childInstance.destroy();

         super.destroy();
    }

### `disable` () public chainable

Inherited from ObjectManager: `js/ObjectManager.js:64`

The disable method is responsible for disabling event listeners and/or children of the containing objects.

#### Example:

     disable() {
         if (this.isEnabled === false) { return this; }

         this._childInstance.removeEventListener(BaseEvent.CHANGE, this.handlerMethod, this);
         this._childInstance.disable();

         return super.disable();
     }

### `dispatchEvent`
(

- `event`
- `[data=null]`

)
public chainable

Inherited from EventDispatcher: `js/event/EventDispatcher.js:159`

Dispatches an event into the event flow. The event target is the EventDispatcher object upon which the dispatchEvent() method is called.

#### Parameters:

- `event` String | BaseEvent

  The Event object or event type string you want to dispatch. You can create custom events, the only requirement is all events must extend BaseEvent.

- `[data=null]` Any optional

  The optional data you want to send with the event. Do not use this parameter if you are passing in a BaseEvent.

#### Example:

     this.dispatchEvent('change');

     // Example: Sending data with the event:
     this.dispatchEvent('change', {some: 'data'});

     // Example: With an event object
     // (event type, bubbling set to true, cancelable set to true and passing data) :
     let event = new BaseEvent(BaseEvent.CHANGE, true, true, {some: 'data'});
     this.dispatchEvent(event);

     // Here is a common inline event object being dispatched:
     this.dispatchEvent(new BaseEvent(BaseEvent.CHANGE));

### `enable` () public chainable

Inherited from ObjectManager: `js/ObjectManager.js:41`

The enable method is responsible for enabling event listeners and/or children of the containing objects.

#### Example:

    enable() {
         if (this.isEnabled === true) { return this; }

         this._childInstance.addEventListener(BaseEvent.CHANGE, this.handlerMethod, this);
         this._childInstance.enable();

         return super.enable();
    }

### `getChildAt`
(

- `index`

)
DisplayObject

Defined in `js/display/DisplayObjectContainer.js:198`

Returns the child display object instance that exists at the specified index.

#### Parameters:

- `index` Int

  The index position of the child object.

#### Returns:

DisplayObject:

The child display object at the specified index position.

### `getChildByCid`
(

- `sjsId`

)
DisplayObject | Null public

Defined in `js/display/DisplayObjectContainer.js:208`

Gets a DisplayObject by its sjsId.

#### Parameters:

- `sjsId` Number

#### Returns:

DisplayObject | Null:

### `getChildIndex`
(

- `child`

)
Int public

Defined in `js/display/DisplayObjectContainer.js:176`

Returns the index position of a child DisplayObject instance.

#### Parameters:

- `child` DisplayObject

  The DisplayObject instance to identify.

#### Returns:

Int:

The index position of the child display object to identify.

### `getEventListeners` () String public

Inherited from EventDispatcher: `js/event/EventDispatcher.js:248`

Generates a string output of event listeners for a given object.

#### Returns:

String:

#### Example:

     this.getEventListeners();

     // [ClassName] is listening for the 'BaseEvent.change' event.

### `getQualifiedClassName` () String public

Inherited from BaseObject: `js/BaseObject.js:40`

Returns the fully qualified class name of an object.

#### Returns:

String:

Returns the class name.

#### Example:

    let someClass = new SomeClass();
    someClass.getQualifiedClassName();

    // SomeClass

### `hasEventListener`
(

- `type`
- `callback`
- `scope`

)
Boolean public

Inherited from EventDispatcher: `js/event/EventDispatcher.js:223`

Check if an object has a specific event listener already added.

#### Parameters:

- `type` String

  The type of event.

- `callback` Function

  The listener method to call.

- `scope` Any

  The scope of the listener object.

#### Returns:

Boolean:

#### Example:

     this.hasEventListener(BaseEvent.CHANGE, this._handlerMethod, this);

### `layout` () DisplayObject public chainable

Inherited from DisplayObject: `js/display/DisplayObject.js:190`

The layout method provides a common function to handle updating objects in the view.

#### Returns:

DisplayObject:

Returns an instance of itself.

### `removeChild`
(

- `child`

)
DisplayObjectContainer public chainable

Defined in `js/display/DisplayObjectContainer.js:104`

Removes the specified child object instance from the child list of the parent object instance. The parent property of the removed child is set to null , and the object is garbage collected if no other references to the child exist. The index positions of any objects above the child in the parent object are decreased by 1.

#### Parameters:

- `child` DisplayObject

  The DisplayObject instance to remove.

#### Returns:

DisplayObjectContainer:

Returns an instance of itself.

### `removeChildren` () DisplayObjectContainer public chainable

Defined in `js/display/DisplayObjectContainer.js:125`

Removes all child DisplayObject instances from the child list of the DisplayObjectContainerContainer instance. The parent property of the removed children is set to null , and the objects are garbage collected if no other references to the children exist.

#### Returns:

DisplayObjectContainer:

Returns an instance of itself.

### `removeEventListener`
(

- `type`
- `callback`
- `scope`

)
public chainable

Inherited from EventDispatcher: `js/event/EventDispatcher.js:131`

Removes a specified listener from the EventDispatcher object.

#### Parameters:

- `type` String

  The type of event.

- `callback` Function

  The listener object to remove.

- `scope` Any

  The scope of the listener object to be removed.

#### Example:

     this.removeEventListener(BaseEvent.CHANGE, this._handlerMethod, this);

### `swapChildren`
(

- `child1`
- `child2`

)
DisplayObjectContainer public chainable

Defined in `js/display/DisplayObjectContainer.js:141`

Swaps two DisplayObject's with each other.

#### Parameters:

- `child1` DisplayObject

  The DisplayObject instance to be swap.

- `child2` DisplayObject

  The DisplayObject instance to be swap.

#### Returns:

DisplayObjectContainer:

Returns an instance of itself.

### `swapChildrenAt`
(

- `index1`
- `index2`

)
DisplayObjectContainer public chainable

Defined in `js/display/DisplayObjectContainer.js:157`

Swaps child objects at the two specified index positions in the child list. All other child objects in the display object container remain in the same index positions.

#### Parameters:

- `index1` Int

  The index position of the first child object.

- `index2` Int

  The index position of the second child object.

#### Returns:

DisplayObjectContainer:

Returns an instance of itself.

There are no methods that match your current filter settings. You can change your filter settings in the index section on this page. index