Shulou(Shulou.com)06/02 Report--

This article mainly introduces how to realize the event conversion between AS2 and AS3 in Flex3. It is very detailed and has a certain reference value. Interested friends must read it!

Conversion of events

The events of AS3 are very different from AS2 in that they are more unified and more powerful.

1. How to listen for events (Handlingtheevents)

In the AS2 era, there are several ways to listen to events, such as onPress=function () {}, addListener (listener), etc., while in the AS3 era, there is a unified addEventListener (type:String,listener:Function,useCapture:Boolean=false,priority:int=0,useWeakReference:Boolean=false): void, which is a method declared by the interface IEventDispatcher, and the EventDispatcher class implements this method (of course, several other methods are also implemented, which are not described here). Here is an example where the listening element is compared with the pressed AS2,AS3 method:

AS2:

Mc.onPress=Delegate.create (this,__onPress);... Privatefunction__onPress (): Void {/ / Dosomething} AS3: mc.addEventListener (MouseEvent.MOUSE_DOWN,__onPress);... Privatefunction__onPress (e:MouseEvent): Void {/ / Dosomething}

As you can see, the first difference is that AS2 directly overrides the onPress attribute, allowing him to call _ _ onPress, while AS3 adds a listener and does not cover anything. It shows that AS3 is more flexible, because if you have two listeners, AS2 will be very difficult to deal with. Secondly, in AS2, in order to make the scope (scope) of the listener function correct (that is, the this in the function should correctly refer to this example), we usually need to use Delegate. In AS3, there is no need to use it, because AS3 will automatically Delegate the function operation, which is equivalent to the system or compiler calling Delegate for us, thus saving the trouble and avoiding the error introduced by forgetting the call. Each event listener function in AS3 must accept an event instance (Evnetinstance), which is described in the next section.

In addition, let's take a look at several other parameters of addEventListener, whether useCapture is used in the capture period, which will be explained in the third section; priority priority, the same type of event, the higher the priority, the earlier the listener will be called. The default is 0. Whether useWeakReference is a weak reference, AS3 adds the function of weak reference. Friends who are familiar with Java should know what this means, that is, this reference will not be counted in the reference count, and the garbage collector will recycle an object when it is not strongly referenced by any other object. In other words, if you use useWeakReference=true here, the listener will be recycled if there is no reference to it anywhere else, but we usually use the default value false, because strictly managed programs, you will remember when to add listeners and when to remove listeners.

◆ in the AS2 era, remove listeners, for the above example is very simple, only a simple mc.onPress=undefined, in AS3, you need to mc.removeEventListener (MouseEvent.MOUSE_DOWN,__onPress), in fact, it is also very convenient, you remove the just added listeners, you only need to replace the addEventListener function with the removeEventListener function, and the first three parameters remain unchanged (the third parameter in my example here uses the default).

In AS2, there are other ways to listen to events, such as Key.addListener, which is a bit similar to AS3, except that it adds object as a listener, and then calls the method with the specified name of object, so it is very dynamic and error-prone, such as I write object's onKeyDown method as onkeydown, the compiler will not report any errors, but when the program is running, it may not be the effect you want.

2. Event class (Eventclasses)

As we mentioned earlier, AS3's event listener function must receive an event object, and different events may receive different types of objects (specific type, please check the help documentation), but all event classes inherit from the flash.events.Event class. Different event types in Flex3 tutorials have their own properties and methods, from which you can get the event content you want. For example, MouseEvent.stageX lets you know the x coordinates of the mouse on the stage when the mouse event occurs, and KeyboardEvent.keyCode lets you know the key code to press / release when the keyboard event occurs.

There are many properties and methods related to the event flow, so we will explain them in the next section.

3. Event flow (Eventflow)

Event flow in Flex3 tutorials is a new mechanism introduced by AS3 that makes event listening for visual elements more flexible and powerful.

The event flow on the event is only valid for visual elements, that is, the DisplayObject object and its subclass objects have this mechanism. What on earth is the event flow?

Event flow means that an event not only triggers its own listener, it also triggers similar listeners from its parent component to other nodes in the entire path of the stage, in this order: * Phase (Capture phase) events trigger events in turn from the stage to the parent component path of the occurrence, and then the second phase (Target phase) the event producer triggers itself, and the third stage (Bubbling phase) Events are triggered in turn from the parent class of the occurrence to the stage. As shown in the following figure:

Note that the Flow here refers to the flow in the component hierarchy on the stage, corresponding to a structure related to DisplayObject.parent and DisplayObjectContainer.getChildAt (). Note that this is not the structure of class inheritance relationships. In the early days of exposure to AS3, this is more difficult to understand, and here is an example that should make it easier for you to understand:

In the age of AS2, suppose I wanted to make a simple window with only an OK button on it. The function we imagined was that first the window could be dragged, and then the user clicked OK to close the window. So usually, we will simply create a MC as a form, and then create a Button in this MC to listen to Button's onPress event to close MC, then no problem, then drag the implementation of MC, we startDrag by listening to MC's onPress event, the problem arises, because Button is in MC, after MC listens for events, Button will not receive events. Usually to do this, we have to create a background symbol in that MC, under the Button, and then listen for the event of that background symbol to start dragging. The reason for creating this extra background component is that if the parent of a component listens for events (in this case, mouse events, some events are different), then the component will not listen for any events.

It is equivalent to the event that the parent component eats all the child components. In AS3, it is different. Recall the process of event flow just described. If the user clicks on Button, first the stage will trigger the event, then the parent components of MC, then MC, then Button, and then reverse cycle. If the user clicks MC (for example, next to Button, inside the MC), it will be stage- > MC parent component-> MC- > MC parent component-> stage. In both cases, MC will get event triggers, so in the AS3 era, there is no need to create extra helper components specifically to listen for events. The code will also become simple. And the different order of the capture and bubling phases allows you to choose whether to do the action before or after the event trigger. AddEventListener (type:String,listener:Function,useCapture:Boolean=false,priority:int=0,useWeakReference:Boolean=false): the third parameter of the void method allows you to specify whether you are listening for events in the capture phase, and false represents listening for events in the other two phases. In the removeEventListener method, you specify which stage of the listener to remove, and the default value is false.

The Event class in the Flex3 tutorial has a series of properties and methods related to ◆ as opposed to the event flow:

Target: this attribute points to the event trigger. For example, if the mouse clicks Button, then the target is Button. If the mouse clicks next to Button, inside the MC, then it is MC.

CurrentTarget: this property points to the element in the event stream that currently triggers the event. For example, in the previous example, the mouse clicked Button. If you listen to the mouse click event of MC, then in the listener that listens to MC, the currentTarget points to MC, and in the listener that listens to Button, the currentTarget points to Button. You can look at the diagram of the event flow. The actual order of currentTarget values is Stage- > ParentNode- > Child1Node- > ParentNode- > Stage. Compared to target, for each event, target always refers to the event creator, such as Child1Node in the figure.

Bubbles: this attribute indicates whether this event has a bubbling phase in the event stream, some events do not have this phase, such as unload events, and most non-interactive events do not have a bubbling phase. Do all events have a capture phase? As mentioned earlier, only visual elements have the concept of event flow, which means that non-visual elements cannot have capture and bubbling phases. So all component events have a capture phase? Yes, it is. Events in which bubbles is false have no bubbles phase, but there is a capture phase.

Cancelable: this property indicates whether this event can cancel its default behavior. This property is related to the preventDefault () method.

EventPhase: this property indicates which stage of the event flow this event is in, one of the three stages of capture,target,bubbling.

Type: this property indicates what type this event is, and corresponds to the * parameter type:String of addEventListener/removeEventListener.

PreventDefault (): this method cancels the default behavior of events. Not all events have default behavior, and not all events can be canceled. Whether the default behavior of an event can be canceled or not can be seen through the cancelable property. For example, the default behavior of the TextEvent.TEXT_INPUT event is to add the input characters to the TextField, this event behavior can be canceled, and if you call its preventDefault () method, the characters will not be added to the TextField. For events like MouseEvent.MOUSE_DOWN, there is no default behavior that can be canceled. For example, if you press a button, the behavior has already occurred and cannot be cancelled. In fact, from a logical point of view, there is nothing that can be cancelled. It depends on how you understand it. Anyway, whether you can take cancelable has already indicated.

IsDefaultPrevented (): this method returns whether the default behavior of the event has been cancelled.

StopPropagation (): this method stops the propagation of events in the event stream, such as the example mentioned above. If you call this method in the capture phase stage listener, then no events will be received in subsequent nodes. If you call this function halfway, no event will be received at the subsequent node stage after the function is executed.

StopImmediatePropagation (): this method stops the propagation of events in the event flow, including the current node. The difference between this method and stopPropagation () is that stopPropagation () does not stop the event firing of the current node. You know, we can add multiple listeners to the same node, such as stage. If we use stopPropagation (), then after you call it, after the listeners of the same node are triggered completely, the event stops propagating. StopImmediatePropagation () will stop propagating immediately after it is called, and even events on the same node will not receive events.

The above is all the content of the article "how to convert events between AS2 and AS3 in Flex3". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.