Packagecom.ghostwire.ui.core
Classpublic class uiComponent
InheritanceuiComponent Inheritance flash.display.Sprite
SubclassesuiBox, uiButton, uiFrame, uiGrid, uiImage, uiLabel, uiMenu, uiPane, uiScrollable, uiSlider, uiStepper, uiTabView, uiTabViewBar, uiText, uiWindow

The uiComponent class is the base class for all controls and containers in the Aspire UI Framework. You should not instantiate a uiComponent object directly. Instead, use one of the subclasses. If you need to nest components within components, use one of the container classes.

Tab Focus Management
The Aspire UI Framework implements tab focus management automatically according to the way you nest component instances within containers. Basically, the focus chain will intuitively follow the containment hierarchy - hitting the TAB key moves from one focusable component to the next according to the child index hierarchy within its parent container. This means that you do not need to assign the tabIndex property. To exclude a component from the tab focus chain, set its tabEnabled property to false.

Layout Management
It is recommended that you do not use absolute positioning and sizing for your components. In the Aspire UI Framework, each component has a desired size that is computed automatically based on its needs (contents such as image icon, text and formatting, padding, etc.). Typically, you would only decide the sizes of top-level containers, use layout containers such as uiBox to lay out the components, set up component properties such as margin, padding, fillX, fillY, etc. and let the framework do the rest of the work. In this way, should the contents change, the affected components can resize and reposition automatically.

"scaleX" and "scaleY" Properties
These properties are not used. Setting these properties has no effect.

~ This class is available in Aspire UI Components Lite Edition ~



Public Properties
 PropertyDefined by
  alignX : Number
Indicates how the component would like to be aligned horizontally within its allocated space.
uiComponent
  alignY : Number
Indicates how the component would like to be aligned vertically within its allocated space.
uiComponent
  background : Object
Indicates the style of the background for this component.
uiComponent
  container : uiComponent
[read-only] Indicates the uiComponent instance that contains this instance.
uiComponent
  depth : int
[read-only] Indicates how deep the component is in the containment hierarchy.
uiComponent
  desiredAllocationHeight : int
[read-only] Indicates the vertical space this component would like to be allocated.
uiComponent
  desiredAllocationWidth : int
[read-only] Indicates the horizontal space this component would like to be allocated.
uiComponent
  enabled : Boolean
Indicates whether the component is enabled for user interaction.
uiComponent
  fillX : Boolean
Indicates whether or not the component should automatically expand or shrink to fill its allocated horizontal space.
uiComponent
  fillY : Boolean
Indicates whether or not the component should automatically expand or shrink to fill its allocated vertical space.
uiComponent
  focusPadding : Object
Indicates the thickness of the interior space from the edge of the component to the focus rectangle.
uiComponent
  focusRect : Object
Indicates the class to use when rendering the rectangle around the component to indicate that it is in focus.
uiComponent
  height : Number
Indicates the current height of the component.
uiComponent
  margin : Object
Indicates the thickness of the space surrounding the component.
uiComponent
  maxHeight : int
Indicates the upper limit for height.
uiComponent
  maxWidth : int
Indicates the upper limit for width.
uiComponent
  minHeight : int
Indicates the lower limit for height.
uiComponent
  minWidth : int
Indicates the lower limit for width.
uiComponent
  padding : Object
Indicates the thickness of the interior space from the edge of the component to the content area, which is where child components, if any, are contained.
uiComponent
  skin : String
Indicates the name of the skin to use for this component instance.
uiComponent
  stretch : Boolean
Indicates whether surplus space available in the parent container should be allocated to this component.
uiComponent
  textStyle : String
Indicates the style to use for uiText instances contained in this component.
uiComponent
  toolTip : Object
Indicates the content (text) of the tooltip that should be shown when the mouse hovers over this control.
uiComponent
  uiskin : uiBitmapImage
[read-only] Returns the uiBitmapImage rendered as the skin - for advanced users only.
uiComponent
  visible : Boolean
Indicates whether or not the component is visible within its container.
uiComponent
  width : Number
Indicates the current width of the component.
uiComponent
Public Methods
 MethodDefined by
  
invalidate(type:String):void
Invalidates this component's "size", "display", "layout" or "textstyle".
uiComponent
  
move(x:Number, y:Number, noEvent:Boolean = false):void
Moves the component to the specified position, disregarding its allocation.
uiComponent
  
removeAllChildren(all:Boolean = false):void
Removes all children from this component.
uiComponent
  
setFocus(flag:Boolean = true):void
Gives this component instance the focus; the component must be on the display list and has its tabEnabled property set to true, otherwise this method will fail silently.
uiComponent
  
setSize(width:Number, height:Number, noEvent:Boolean = false):void
Sets this component's size to the specified width and height.
uiComponent
  
setVisible(value:Boolean, noEvent:Boolean = false):void
Sets the visibility of this component instance, dispatching a "show" or "hide" event accordingly.
uiComponent
  
validateNow():void
Validates and render the component instance, and any component instances with depth higher than itself in the validation queue, immediately.
uiComponent
Events
 EventSummaryDefined by
   Dispatched when the component's visible property is changed from true to false via calling the setVisible() method.uiComponent
   Dispatched when the component's position within its parent container has changed via calling the move() method.uiComponent
   Dispatched when the component's size has changed via calling the setSize() method.uiComponent
   Dispatched when the component's visible property is changed from false to true via calling the setVisible() method.uiComponent
Property detail
alignXproperty
alignX:Number  [read-write]

Indicates how the component would like to be aligned horizontally within its allocated space.

The value should be a number between 0.0 and 1.0, representing the fraction of free horizontal space to the left of the component. A value of 0.0 means no free space to the left, while 1.0 means all free space to the left. A value of 0.5 will place the component in the center.

This property has no effect if fillX is true (because there will be no free horizontal space).

The default value is 0.

Implementation
    public function get alignX():Number
    public function set alignX(value:Number):void

See also

alignYproperty 
alignY:Number  [read-write]

Indicates how the component would like to be aligned vertically within its allocated space.

The value should be a number between 0.0 and 1.0, representing the fraction of free vertical space to the top of the component. A value of 0.0 means no free space to the top, while 1.0 means all free space to the top. A value of 0.5 will place the component in the center.

This property has no effect if fillY is true (because there will be no free vertical space).

The default value is 0.

Implementation
    public function get alignY():Number
    public function set alignY(value:Number):void

See also

backgroundproperty 
background:Object  [read-write]

Indicates the style of the background for this component. By default, no background will be drawn. Typically, only containers will use this property. To draw a background, set this property to an object with the following properties:

color - The hexadecimal color value of the fill. If no fill is intended, do not specify this property. If a gradient fill is desired, define this property as an array of RGB hexadecimal color values to be used in the gradient. Refer to the documentation on flash.display.Graphics.beginGradientFill() method for more information.

alpha - The transparency of the fill. The value should be between 0.0 to 1.0. If color is an array, alpha must also be an array of corresponding values. Refer to the documentation on flash.display.Graphics.beginGradientFill() method for more information. No effect if color is undefined.

ratios - Required if using gradient fill (ie color is an array). Refer to the documentation on flash.display.Graphics.beginGradientFill() method for more information. No effect if color is undefined.

rotation - Required if using gradient fill (ie color is an array). Indicates the amount to rotate the gradient box, in degrees. No effect if color is undefined.

cornerRadius - The roundedness of the cornerRadiuss of the background. Do not specify this property if a normal rectangle is desired.

border - The color of the border. If no border is intended, do not specify this property.

borderWidth - The thickness of the border. No effect if lineColor is undefined. If you do not specify the thickness, 0.5 (hairline) is used.

borderAlpha - The transparency of the border. No effect if lineColor is undefined. If you do not specify this property, 1.0 (no transparency) is used.

glow - The color of the glow effect. If no glow effect is intended, do not specify this property, or set it to -1 (negative 1).

shadow - The color of the drop shadow. If no drop shadow is intended, do not specify this property, or set it to -1 (negative 1). The shadow is applied after any glow effect.

filters - An array of BitmapFilter objects to apply to the component instance. The flash.filters package contains several classes that define specific filters you can use. If you specify this property, the glow and shadow properties will be ignored.

To remove an existing background, set this property to null.

For component instances with different visual states, it is also possible to define the above values for the various visual states. To do so, simply suffix the property name with "_state" (underscore+state), eg. color_over, color_down, etc.

The default value is null.

Implementation
    public function get background():Object
    public function set background(value:Object):void
containerproperty 
container:uiComponent  [read-only]

Indicates the uiComponent instance that contains this instance. This is usually but not always the same as the parent property.

Implementation
    public function get container():uiComponent
depthproperty 
depth:int  [read-only]

Indicates how deep the component is in the containment hierarchy. The property is an integer value - the higher the number, the deeper the component is in the hierarchy. A depth of one (1) indicates that the component is at the top of the hierarchy. A depth of zero (0) indicates that the component is not yet added to the display list.

Implementation
    public function get depth():int
desiredAllocationHeightproperty 
desiredAllocationHeight:int  [read-only]

Indicates the vertical space this component would like to be allocated. Typically, a component will request for space to accomodate its contents, margin and padding. This read-only value is set internally by the component.

Implementation
    public function get desiredAllocationHeight():int
desiredAllocationWidthproperty 
desiredAllocationWidth:int  [read-only]

Indicates the horizontal space this component would like to be allocated. Typically, a component will request for space to accomodate its contents, margin and padding. This read-only value is set internally by the component.

Implementation
    public function get desiredAllocationWidth():int
enabledproperty 
enabled:Boolean  [read-write]

Indicates whether the component is enabled for user interaction. If the parent container is disabled, this property will return false regardless of the child object's own enabled value.

Implementation
    public function get enabled():Boolean
    public function set enabled(value:Boolean):void
fillXproperty 
fillX:Boolean  [read-write]

Indicates whether or not the component should automatically expand or shrink to fill its allocated horizontal space.

The default value is false.

Implementation
    public function get fillX():Boolean
    public function set fillX(value:Boolean):void
fillYproperty 
fillY:Boolean  [read-write]

Indicates whether or not the component should automatically expand or shrink to fill its allocated vertical space.

The default value is false.

Implementation
    public function get fillY():Boolean
    public function set fillY(value:Boolean):void
focusPaddingproperty 
focusPadding:Object  [read-write]

Indicates the thickness of the interior space from the edge of the component to the focus rectangle.

When setting this property, you may specify a positive integer, a comma-delimited string (of integer values), or an array (of integer values). If you specify one value, that value is applied to all sides; if you supply two values, the first is applied to top and bottom, the second applied to left and right; if you supply three values, the first is applied to top, second to left and right, third to bottom; if you supply four, each side takes their respective values.

To make the focus rectangle appear outside the perimeter of the component, use negative values when setting the property.

Example

  instance.focusPadding = -1; // sets thickness to -1px for top, right, bottom and left, making the focus rectangle appears outside the control
  instance.focusPadding = "2,5"; // sets thickness to 2px for top/bottom, 5px for right/left
  instance.focusPadding = [2,5,0]; // sets thickness to 2px for top, 5px for right/left, 0px for bottom
  instance.focusPadding = [2,0,1,2]; // sets thickness to 2px for top, 0px for right, 1px for bottom, 2px for left

When you query this property, you get a uiEdge object. If you need to adjust the focusPadding, you must set this property in the way described above; you cannot modify the properties of the uiEdge directly (which are read-only properties).

To set to zero padding, set this property to null (default value).

Implementation
    public function get focusPadding():Object
    public function set focusPadding(value:Object):void

See also

focusRectproperty 
focusRect:Object  [read-write]

Indicates the class to use when rendering the rectangle around the component to indicate that it is in focus.

You can also set this property to a String value indicating the PNG skin asset to use (omitting the .png file extension). In this case, the uiFocusRect class is used for rendering, using the specified PNG skin asset instead of the usual "FocusRect.png". The PNG skin asset must be defined in "rules.xml" file in the theme folder (where the PNG image file is stored).

For example, the following will use FocusRectWhite.png instead of FocusRect.png when rendering the focus rectangle on the myBlackPushButton control:
myBlackPushButton.focusRect = "FocusRectWhite";

If this property is undefined, the component will use its parent's focusRect value. In the case of a top-level component, the uiFocusRect class is used by default.

Set this property to false if no focus rectangle is to be drawn on the component.

Implementation
    public function get focusRect():Object
    public function set focusRect(value:Object):void

See also

heightproperty 
height:Number  [read-write]

Indicates the current height of the component. Setting this property is the same as calling the setSize() method, passing true for the noEvent parameter (a "resize" event will not be dispatched) and the current value of width (default value of 0 if the component instance has not yet been added to the stage) for the parameter width. Therefore, setting this property directly is not recommended; use the setSize() method instead so it is clear in your code what values you are assigning to width and height.

If fillY is true, resulting height will not be less than its allocated vertical space.

As a reminder, sizing absolutely means that the "desired" size of the component will no longer be auto-computed but will instead be fixed.

The default value is 0.

Implementation
    public function get height():Number
    public function set height(value:Number):void

See also

marginproperty 
margin:Object  [read-write]

Indicates the thickness of the space surrounding the component.

When setting this property, you may specify a positive integer, a comma-delimited string (of integer values), or an array (of integer values). If you specify one value, that value is applied to all sides; if you supply two values, the first is applied to top and bottom, the second applied to left and right; if you supply three values, the first is applied to top, second to left and right, third to bottom; if you supply four, each side takes their respective values.

Example

  instance.margin = 2; // sets thickness to 2px for top, right, bottom and left
  instance.margin = "2,5"; // sets thickness to 2px for top/bottom, 5px for right/left
  instance.margin = [2,5,0]; // sets thickness to 2px for top, 5px for right/left, 0px for bottom
  instance.margin = [2,0,1,2]; // sets thickness to 2px for top, 0px for right, 1px for bottom, 2px for left

Specifying negative values has a rather special result. Instead of asserting empty space, the component instance will enlarge itself by the indicated number of pixels (absolute positive value of the negative value) and displace (move) itself in that direction for the same number of pixels. This means that the component instance would appear outside its allocation area.

A component's margin contributes to its desiredAllocationWidth and desiredAllocationHeight. The margin has priority over the component itself where space allocation is concerned - when space is limited, it is absorbed by margin first, before the component's painted area gets the rest.

When you query this property, you get a uiEdge object. If you need to adjust the margin, you must set this property in the way described above; you cannot modify the properties of the uiEdge directly (which are read-only properties).

To set to zero margin, set this property to null (default value).

Implementation
    public function get margin():Object
    public function set margin(value:Object):void

See also

maxHeightproperty 
maxHeight:int  [read-write]

Indicates the upper limit for height. If set to zero, it means there is no limit.

If the component instance is skinned, this property is inherently set to 2880. This is because the maximum height of the native Flash Player BitmapData object is 2880 pixels and the Aspire UI Framework uses bitmaps for skinning.

The default value is 0.

Implementation
    public function get maxHeight():int
    public function set maxHeight(value:int):void
maxWidthproperty 
maxWidth:int  [read-write]

Indicates the upper limit for width. If set to zero, it means there is no limit.

If the component instance is skinned, this property is inherently set to 2880. This is because the maximum width of the native Flash Player BitmapData object is 2880 pixels and the Aspire UI Framework uses bitmaps for skinning.

The default value is 0.

Implementation
    public function get maxWidth():int
    public function set maxWidth(value:int):void
minHeightproperty 
minHeight:int  [read-write]

Indicates the lower limit for height.

The default value is 0.

Implementation
    public function get minHeight():int
    public function set minHeight(value:int):void
minWidthproperty 
minWidth:int  [read-write]

Indicates the lower limit for width.

The default value is 0.

Implementation
    public function get minWidth():int
    public function set minWidth(value:int):void
paddingproperty 
padding:Object  [read-write]

Indicates the thickness of the interior space from the edge of the component to the content area, which is where child components, if any, are contained.

When setting this property, you may specify a positive integer, a comma-delimited string (of integer values), or an array (of integer values). If you specify one value, that value is applied to all sides; if you supply two values, the first is applied to top and bottom, the second applied to left and right; if you supply three values, the first is applied to top, second to left and right, third to bottom; if you supply four, each side takes their respective values.

Example

  instance.padding = 2; // sets thickness to 2px for top, right, bottom and left
  instance.padding = "2,5"; // sets thickness to 2px for top/bottom, 5px for right/left
  instance.padding = [2,5,0]; // sets thickness to 2px for top, 5px for right/left, 0px for bottom
  instance.padding = [2,0,1,2]; // sets thickness to 2px for top, 0px for right, 1px for bottom, 2px for left

Do not specify negative values, otherwise the component will work erratically.

The padding has priority over the component's contents (children) where space allocation is concerned - when space is limited, it is absorbed by padding first, before the contents get the rest.

When you query this property, you get a uiEdge object. If you need to adjust the padding, you must set this property in the way described above; you cannot modify the properties of the uiEdge directly (which are read-only properties).

To set to zero padding, set this property to null (default value).

Implementation
    public function get padding():Object
    public function set padding(value:Object):void

See also

skinproperty 
skin:String  [read-write]

Indicates the name of the skin to use for this component instance. All components that are intended to have a skin will have this property set in the respective class (normally to the same name as the class name without the "ui" prefix). For example, a uiPushButton instance will have a default skin of "PushButton". If you would like a particular instance to use a specific skin, you can set this property to the name of that skin. A component without a skin, or not intended to show its skin, should set this property to null.

Implementation
    public function get skin():String
    public function set skin(value:String):void
stretchproperty 
public var stretch:Boolean

Indicates whether surplus space available in the parent container should be allocated to this component.

If the value is false, the component will only take what is enough to render itself at its "desired" size. If the value is true, the component will participate in absorbing extra space. The extra free space available will be shared equally among child components with the stretch property set to true.

Note that this is only a "layout hint" and it is up to the parent layout container to implement this feature/property in its layout procedure. The uiBox layout container honors this property if the uniform property of the uiBox container is not true (because setting uniform to true allocates equal space to each child).

The default value is false.

See also

textStyleproperty 
textStyle:String  [read-write]

Indicates the style to use for uiText instances contained in this component. If undefined, the component will use its parent's textStyle property. This means that if you set the textStyle property for a container, all child objects without their own textStyle property will be affected. In the case of a top-level component, if undefined, the value "default" will be returned.

Style names must be all lower case. For example, the component does not differentiate between "textBody" and "textbody" (and will use "textbody" in either case).

The default value is "default".

Implementation
    public function get textStyle():String
    public function set textStyle(value:String):void

See also

toolTipproperty 
toolTip:Object  [read-write]

Indicates the content (text) of the tooltip that should be shown when the mouse hovers over this control.

Note: Applicable only if the com.ghostwire.ui.managers.uiToolTips class is initialized (Aspire UI Components Standard Edition). Otherwise, this property does nothing.

Implementation
    public function get toolTip():Object
    public function set toolTip(value:Object):void

See also

uiskinproperty 
uiskin:uiBitmapImage  [read-only]

Returns the uiBitmapImage rendered as the skin - for advanced users only. Be careful when referencing and manipulating this skin asset because bitmap data is cached and shared (eg, modifying bitmapData directly can corrupt your skinning data).

If skin property is defined, but the component instance is not yet added to the display list and drawn its skin for the first time, an empty uiBitmapImage is returned (bitmapData is null).

Returns null if the instance does not use a skin asset, ie skin property is null.

Implementation
    public function get uiskin():uiBitmapImage
visibleproperty 
visible:Boolean  [read-write]

Indicates whether or not the component is visible within its container.

Changing the property from false to true dispatches a show event.

Changing the property from true to false dispatches a hide event.

The default value is true.

Implementation
    public function get visible():Boolean
    public function set visible(value:Boolean):void
widthproperty 
width:Number  [read-write]

Indicates the current width of the component. Setting this property is the same as calling the setSize() method, passing true for the noEvent parameter (a "resize" event will not be dispatched) and the current value of height (default value of 0 if the component instance has not yet been added to the stage) for the parameter height. Therefore, setting this property directly is not recommended; use the setSize() method instead so it is clear in your code what values you are assigning to width and height.

If fillX is true, resulting width will not be less than its allocated horizontal space.

As a reminder, sizing absolutely means that the "desired" size of the component will no longer be auto-computed but will instead be fixed.

The default value is 0.

Implementation
    public function get width():Number
    public function set width(value:Number):void

See also

Method detail
invalidate()method
public function invalidate(type:String):void

Invalidates this component's "size", "display", "layout" or "textstyle".

Parameters
type:String — A String value indicating whether the "size", "display", "layout" or "textstyle" has been invalidated.
move()method 
public function move(x:Number, y:Number, noEvent:Boolean = false):void

Moves the component to the specified position, disregarding its allocation.

Parameters
x:Number — An integer value indicating the desired horizontal position of the component.
 
y:Number — An integer value indicating the desired vertical position of the component.
 
noEvent:Boolean (default = false)
removeAllChildren()method 
public function removeAllChildren(all:Boolean = false):void

Removes all children from this component. By default, the method will only remove uiComponent instances and not other display objects. If you wish to include all display objects, call the method with true as the parameter.

Parameters
all:Boolean (default = false) — [Optional] If true, removes all display objects contained in the component. If false (default), removes only child components.
setFocus()method 
public function setFocus(flag:Boolean = true):void

Gives this component instance the focus; the component must be on the display list and has its tabEnabled property set to true, otherwise this method will fail silently.

Parameters
flag:Boolean (default = true)
setSize()method 
public function setSize(width:Number, height:Number, noEvent:Boolean = false):void

Sets this component's size to the specified width and height. Once you have explicitly set the size, the component will no longer auto-compute its dimensions - what you set becomes the "desired" size. You can restore auto-computation by passing -1 as the value.

Note that calling this method dispatches a resize event, while setting width and/or height directly does not.

Parameters
width:Number — An integer number indicating the desired width. If you pass a negative value, the width is restored to its auto-computed desired width.
 
height:Number — An integer number indicating the desired height. If you pass a negative value, the height is restored to its auto-computed desired height.
 
noEvent:Boolean (default = false) — If you pass true for this parameter, no resize event will be dispatched.

See also

setVisible()method 
public function setVisible(value:Boolean, noEvent:Boolean = false):void

Sets the visibility of this component instance, dispatching a "show" or "hide" event accordingly.

Parameters
value:Boolean — Boolean value indicating whether the component instance should be visible (true) or not (false).
 
noEvent:Boolean (default = false) — If you pass true for this parameter, no event will be dispatched.
validateNow()method 
public function validateNow():void

Validates and render the component instance, and any component instances with depth higher than itself in the validation queue, immediately. This method will initialize the component instance if it has not yet been initialized.

Event detail
hideevent 
Event object type: com.ghostwire.events.uiEvent
uiEvent.type property = com.ghostwire.ui.events.uiEvent.HIDE

Dispatched when the component's visible property is changed from true to false via calling the setVisible() method.

Dispatched when the component is explicitly hidden via the setVisible() method.

This event has the following properties:

PropertyValue
bubblesfalse
cancelablefalse; there is no default behavior to cancel.
currentTargetThe object that is actively processing the event object with an event listener.
targetThe object that dispatched the event. The target is not always the object listening for the event. Use the currentTarget property to access the object that is listening for the event.
moveevent  
Event object type: com.ghostwire.events.uiMoveEvent
uiMoveEvent.type property = com.ghostwire.ui.events.uiMoveEvent.MOVE

Dispatched when the component's position within its parent container has changed via calling the move() method.

Dispatched when the component is explicitly moved via the move() method.

This event has the following properties:

PropertyValue
bubblesfalse
cancelablefalse; there is no default behavior to cancel.
currentTargetThe object that is actively processing the event object with an event listener.
targetThe object that dispatched the event. The target is not always the object listening for the event. Use the currentTarget property to access the object that is listening for the event.
oldXAn integer number indicating the old value of the x position.
oldYAn integer number indicating the old value of the y position.
resizeevent  
Event object type: com.ghostwire.events.uiResizeEvent
uiResizeEvent.type property = com.ghostwire.ui.events.uiResizeEvent.RESIZE

Dispatched when the component's size has changed via calling the setSize() method.

Dispatched when the component is explicitly resized via the setSize() method.

This event has the following properties:

PropertyValue
bubblesfalse
cancelablefalse; there is no default behavior to cancel.
currentTargetThe object that is actively processing the event object with an event listener.
targetThe object that dispatched the event. The target is not always the object listening for the event. Use the currentTarget property to access the object that is listening for the event.
oldWidthA number indicating the old value of the width.
oldHeightA number indicating the old value of the height.
showevent  
Event object type: com.ghostwire.events.uiEvent
uiEvent.type property = com.ghostwire.ui.events.uiEvent.SHOW

Dispatched when the component's visible property is changed from false to true via calling the setVisible() method.

Dispatched when the component is explicitly set visible via the setVisible() method.

This event has the following properties:

PropertyValue
bubblesfalse
cancelablefalse; there is no default behavior to cancel.
currentTargetThe object that is actively processing the event object with an event listener.
targetThe object that dispatched the event. The target is not always the object listening for the event. Use the currentTarget property to access the object that is listening for the event.