(4 votes, average: 4.75 out of 5) 
Loading ...When we use addEventListener() to assign a method or function to handle an event, that method or function receives an event object as its only argument. The event object has a few properties that help us to get information about the event we're handling. The events, such as MouseEvent.CLICK, for example, are nearly self-explanitory. Try running this code snippet in your timeline:
-
var box:Sprite = new Sprite();
-
box.name = "box";
-
box.graphics.beginFill(0);
-
box.graphics.drawRect(0,0,100,100);
-
box.x = box.y = 50;
-
addChild(box);
-
-
box.addEventListener(MouseEvent.CLICK,
-
onClicked,
-
false, 0, true);
-
-
function onClicked(evt:Event):void {
-
trace("type: " + evt.type);
-
trace("bubbles: " + evt.bubbles);
-
trace("eventPhase: " + evt.eventPhase);
-
trace("cancelable: " + evt.cancelable);
-
-
trace("target: " + evt.target + " " + evt.target.name);
-
trace("currentTarget: " + evt.currentTarget +
-
" " + evt.currentTarget.name);
-
}
After you've pasted this code in your timeline, run your movie and click on the black box. The onClicked function will give you information about the CLICK event in your output window:
type: click bubbles: true eventPhase: 2 cancelable: false target: [object Sprite] box currentTarget: [object Sprite] box
The type property is a string of the event type. In our example the type is "click"—the string representation of the MouseEvent.CLICK constant. The bubbles property is a boolean that is true when the event bubbles up through the display list and false when it doesn't. The eventPhase property contains an integer representing the phase the event is in at the time the proeprty is queried (1 for capture, 2 for target, 3 for bubble). The cancelable property is a boolean that is true if default behaviors associated with an event can be disabled.
The last two properties are the most commonly used properties of the Event object: target and currentTarget. The target property contains a reference to the display object reached during the "target" phase. For a CLICK event this will normally be whatever display object is directly under the mouse when the CLICK event is triggered. You can see this clearly in the prior "Event Phases in Action" post.
The currentTarget property contains a reference to the display object that is actively processing the event. It's easy to get the target and currentTarget properties mixed up. To make this clearer, let's edit our timeline code slightly to get a better look at the difference. Instead of adding your event to btn, add it to the stage:
Change your addEventListener() method accordingly:
stage.addEventListener(MouseEvent.CLICK,
onClicked,
false, 0, true);
Now run your movie, click the black box, and take a look at your output window:
type: click bubbles: true eventPhase: 3 cancelable: false target: [object Sprite] box currentTarget: [object Stage] null
Comparing this to our previous output we can see that the event is no longer getting handled in the "target" phase. Since there is no longer a CLICK event directly associated with btn the event isn't handled until the bubble phase when the CLICK event makes it's way back up to the stage. The currentTarget property reflects this - it shows us that the object processing the event is the stage. This differentiation is important and powerful.
Putting Target and Current Target to Use
Now that you've seen the difference between target and currentTarget let's take a look at how we can use them in a real world application. Below is a demo with two draggable windows, each containing a few buttons. The windows and buttons are not functional, but will help demonstrate this concept.
Download Current Target (7.1 KB, 131 hits)
In the above demo each window is draggable and the clicked window comes to the top of the display list so it appears over the other window. Managing the order in which the windows are drawn is often called z-sorting. Notice that the windows are draggable from any point except when one of the nested buttons is clicked. This feature is made possible by the use of the currentTarget and target properties. A class called SimpleWindow takes care of this functionality:
-
package {
-
-
import flash.display.*;
-
import flash.events.*;
-
-
public class SimpleWindow extends Sprite {
-
-
public function SimpleWindow() {
-
addEventListener(MouseEvent.MOUSE_DOWN,
-
onWinDown,
-
false, 0, true);
-
}
-
-
private function onWinDown(evt:MouseEvent):void {
-
var win:Sprite = evt.currentTarget as Sprite;
-
if (win == evt.target) {
-
win.startDrag();
-
stage.addEventListener(MouseEvent.MOUSE_UP,
-
onForceStopDrag,
-
false, 0, true);
-
}
-
parent.addChild(win);
-
}
-
-
private function onForceStopDrag(evt:MouseEvent):void {
-
stopDrag();
-
stage.removeEventListener(MouseEvent.MOUSE_UP,
-
onForceStopDrag);
-
}
-
}
-
}
The trick here is that we know the only time that currentTarget and target are going to be the same is when the user is clicking on the window, not one of the buttons contained within the window. If a button is clicked the target property will reference that button and the currentTarget will reference the window itself. We use a conditional (lines 16 through 21) to make sure the window is dragged only when both the currentTarget and target are the same. Notice that the z-sorting code is outside the conditional. This is because we still want to retain the z-sorting if a button is clicked.
Print This Post
A colleague and I are designing an application that uses drag and drop functionality. The movie clips being dragged have a dynamic text field inside that will be populated programmatically with AS. We have added the listeners that check for MouseDown and MouseUp to the movie clips (parents of the text field). Now we reference the movie clip being dragged in the test functions that start and stop the dragging as "event.target"; we noticed that if the object below the mouse when dragging begins is the movie clip background, not the text field, the dragging works, however, if you happen to click on the dynamic text field and start dragging, the reference to "event.target" generates an error:
ReferenceError: Error #1069: Property startDrag not found on flash.text.TextField and there is no default value.
at 00_start_stop_drag_fla::MainTimeline/onStartDrag()
myMovieClip2
So even though we are dragging an entire movie clip, because of the way event.target works it fails when the target is the text field inside the MC. This article showed me how to fix that. We use currentTarget instead and the app now works well.
Thanks for letting us know about your success, Rodney!