View comments | RSS feed

Manually dispatching events

You can manually dispatch events using a component instance's dispatchEvent() method. All components that extend UIComponent have this method. The method is inherited from the EventDispatcher class which UIComponent extends.

The syntax for the dispatchEvent() method is as follows:

objectInstance.dispatchEvent(event:Event):Boolean

When dispatching an event, you must create a new Event object. The syntax for the Event object constructor is as follows:

Event(event_type:String, bubbles:Boolean, cancelable:Boolean)

The event_type parameter is the type property of the Event object. The bubbles and cancelable parameters are optional and both default to false. For information on bubbling and capturing, see Event propagation.

You can use the dispatchEvent() method to dispatch any event you want, not just a custom event. You can dispatch a Button control's click event, even though the user did not click a Button control, as in the following example:

<?xml version="1.0"?>
<!-- events/DispatchEventExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="createListener(event)">
  <mx:Script><![CDATA[
     import mx.controls.Alert;
     private function createListener(e:Event):void {
        b1.addEventListener(MouseEvent.MOUSE_OVER, myEventHandler);
        b1.addEventListener(MouseEvent.CLICK, myClickHandler);
     }
     
     private function myEventHandler(e:Event):void {
        var result:Boolean = b1.dispatchEvent(new MouseEvent(MouseEvent.CLICK, true, false));           
     }
     
     private function myClickHandler(e:Event):void {
        Alert.show("Triggered by the " + e.type + " event");
     }
  ]]></mx:Script>
  <mx:Button id="b1" label="Click Me"/>
</mx:Application>

You can also manually dispatch an event in an MXML tag. In the following example, moving the mouse pointer over the button triggers the button's click event:

<?xml version="1.0"?>
<!-- events/DispatchEventExampleInline.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="createListener(event)">
  <mx:Script><![CDATA[
     import mx.controls.Alert;
     private function createListener(e:Event):void {
        b1.addEventListener(MouseEvent.CLICK, myClickHandler);
     }
     
     private function myClickHandler(e:Event):void {
        Alert.show("Triggered by the " + e.type + " event");
     }
  ]]></mx:Script>
  <mx:Button id="b1" label="Click Me" mouseOver="b1.dispatchEvent(new MouseEvent(MouseEvent.CLICK, true, false))"/>
</mx:Application>

Your Flex application is not required to handle the newly dispatched event. If you trigger an event that has no listeners, Flex ignores the event.

You can set properties of the Event object in ActionScript, but you cannot add new properties because the object is not dynamic. The following example intercepts a click event. It then creates a new MouseEvent object and dispatches it. In addition, it sets the value of the shiftKey property of the MouseEvent object to true, to simulate a Shift-click on the keyboard.

<?xml version="1.0"?>
<!-- events/DispatchCustomizedEvent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="addListeners()">
  <mx:Script><![CDATA[
     private function customLogEvent(e:MouseEvent):void {
        ta1.text = e.currentTarget.id + ":" +  e.type + ":" + e.shiftKey;
        
        // Remove current listener to avoid recursion.
        e.currentTarget.removeEventListener("click",customLogEvent);
     }
  
     private function handleEvent(e:MouseEvent):void {
        // Add new handler for custom event about to be dispatched.
        e.currentTarget.addEventListener("click",customLogEvent);

        // Create new event object.
        var mev:MouseEvent = new MouseEvent("click",false,false);

        // Customize event object.
        mev.shiftKey = true;

        // Dispatch custom event.
        e.currentTarget.dispatchEvent(mev);
     }
  
     private function addListeners():void {
        b1.addEventListener("click",handleEvent);
        b2.addEventListener("click",handleEvent);
     }
   
  ]]></mx:Script>

  <mx:VBox id="vb1">
     <mx:Button id="b1" label="B1"/>
     <mx:Button id="b2" label="B2"/>
     <mx:TextArea id="ta1"/>
  </mx:VBox>

</mx:Application>

If you want to add custom properties to an Event object, you must extend the Event object and define the new properties in your own custom class. You can then manually dispatch your custom events with the dispatchEvent() method, as you would any event.

If you create a custom ActionScript class that dispatches its own events but does not extend UIComponent, you can extend the flash.events.EventDispatcher class to get access to the addEventListener(), removeEventListener(), and dispatchEvent() methods.

For more information on creating custom classes, see Creating and Extending Flex 2 Components.


Flex 2.01

Take a survey


Comments


Oleo said on May 8, 2007 at 7:57 AM :
During execution of last sample on this page after clicking on button:
Error: Error #1023: Stack overflow occurred.
at TestEvents/::handleEvent()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
at TestEvents/::handleEvent()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
at TestEvents/::handleEvent()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
at TestEvents/::handleEvent()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
at TestEvents/::handleEvent()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
at TestEvents/::handleEvent()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
at TestEvents/::handleEvent()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
at TestEvents/::handleEvent()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
at TestEvents/::handleEvent()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
at TestEvents/::handleEvent()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
at TestEvents/::handleEvent()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
at TestEvents/::handleEvent()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
at TestEvents/::handleEvent()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
at TestEvents/::handleEvent()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
at TestEvents/::handleEvent()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
at TestEvents/::handleEvent()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
smgilson said on May 8, 2007 at 8:17 AM :
You are correct - this example creates an infinite loop dispatching click events. I changed handleEvent() to dispatch the doubleClick event instead, and it works as expected:

<?xml version="1.0"?>
<!-- events/DispatchCustomizedEvent.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="addListeners()">
<mx:Script><![CDATA[

private function customLogEvent(e:MouseEvent):void {
ta1.text = e.currentTarget.id + ":" + e.type + ":" + e.shiftKey;

// Remove current listener to avoid recursion.
e.currentTarget.removeEventListener("doubleClick",customLogEvent);
}

private function handleEvent(e:MouseEvent):void {

// Add new handler for custom event about to be dispatched.
e.currentTarget.addEventListener("doubleClick",customLogEvent);

// Create new event object.
var mev:MouseEvent = new MouseEvent("doubleClick");

// Customize event object.
mev.shiftKey = true;

// Dispatch custom event.
e.currentTarget.dispatchEvent(mev);
}

private function addListeners():void {
b1.addEventListener("click",handleEvent);
b2.addEventListener("click",handleEvent);
}

]]></mx:Script>

<mx:VBox id="vb1">
<mx:Button id="b1" label="B1"/>
<mx:Button id="b2" label="B2"/>
<mx:TextArea id="ta1"/>
</mx:VBox>

</mx:Application>

Stephen Gilson
Flex Doc Team

 

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flex/201/html/events_054_14.html